J'ai un élément de conteneur qui contient quelques autres éléments, mais en fonction de la taille de l'écran, certaines parties sont inexplicablement coupées en différentes parties. Vous pouvez observer le comportement sur mon lien sandbox de code, lorsque la page HTML est ajustée en largeur (en cliquant et en la faisant glisser). Comment puis-je m'assurer que seule la bordure du conteneur principal est rendue et que les éléments enfants n'ont aucun impact?
https://codesandbox.io/s/focused-tree-ms4f2
import React from "react";
import styled from "styled-components";
const StyledTextBox = styled.div`
height: 15vh;
width: 30vw;
display: flex;
flex-direction: column;
margin: 0 auto;
border: 1px solid black;
background-color: #fff;
> * {
box-sizing: border-box;
}
`;
const InputBox = styled.span`
height: 35%;
width: 100%;
display: flex;
border: none;
outline: none;
`;
const UserInput = styled.input`
height: 100%;
width: 90%;
border: none;
outline: none;
`;
const SolutionBox = styled.div`
height: 35%;
width: 100%;
border: none;
outline: none;
`;
const StyledKeyboard = styled.span`
height: 30%;
width: 100%;
position: relative;
background-color: #DCDCDC;
box-sizing: border-box;
display: flex;
`
export default function App() {
return (
<StyledTextBox>
<InputBox>
<UserInput />
</InputBox>
<SolutionBox/>
<StyledKeyboard/>
</StyledTextBox>
);
}
javascript
css
reactjs
Perplexité
la source
la source
Réponses:
Comme les autres commentateurs, je peux tout à fait distinguer l'erreur que vous signalez, mais cela m'a semblé être un
box-sizing
problème. Lors de l'examen du DOM rendu via https://k7ywy.codesandbox.io/, nous pouvons voir qu'ilbox-sizing:border-box
n'est pas appliqué à l'élément wrapper ou aux éléments internes, mais il est fixé dans l'extrait de code que vous avez collé dans la question.J'ai remarqué certaines choses que je remettais en question.
Pourquoi ne pas appliquer
box-sizing
à tout? Habituellement, lorsque vous traitez avecwidth:100%;
etpadding
/border
/margin
, cela vous facilite la vie!Dans mon exemple, je l'ai supprimé du JS et l'ai appliqué à l'aide du fichier CSS.
Pourquoi utilisez-vous
display:flex
à plusieurs endroits sans attribuer d'autres propriétés liées à Flex?Essayez de supprimer cela de
const InputBox = styled.span
etconst StyledKeyboard = styled.span
Est-ce que cela vous arrange? Exemple de bac à sable . Sortie rendue .
la source
Appliquez simplement le fond aucun ou transparent au champ de saisie et cela résoudra le problème de bordure
la source
C'est un problème de taille de boîte. Vous pouvez en lire plus ici . Je vous recommande également de ne pas utiliser
display: flex
. Essayez peut-être de changer la couleur d'arrière-plan en transparent? J'espère que cela t'aides!la source
Un bon moyen simple est de donner
box-sizing: border-box
à l'élément parent. Pour être sûr, vous pouvez le faire au niveau du composant racine:la source