Части границы делятся

Question

У меня есть элемент контейнера, который содержит несколько других элементов, но в зависимости от размера экрана их части необъяснимым образом обрезаются на разные части. Вы можете наблюдать за поведением по моей ссылке в песочнице кода, когда ширина страницы HTML изменяется (щелкая и перетаскивая ее). Как я могу гарантировать, что отображается только граница основного контейнера и что дочерние элементы не оказывают никакого влияния?

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>
  );
}

Answer 1

Как и другие комментаторы, я вполне могу разобрать ошибку, о которой вы сообщаете, но она казалась мне проблемой box-sizing. При просмотре обработанного DOM с помощью https://k7ywy.codesandbox.io/ мы видим, что box-sizing:border-box не применяется к элементу обертки или внутренним элементам, но исправлено в фрагменте, который вы вставили в вопрос.

Я заметил несколько вопросов, которые я бы задал.

1. Почему бы не применить box-sizing ко всему? Обычно при работе с width:100%; и padding / border / margin жизнь становится намного проще!
   В моем примере я удалил ее из JS и применил ее, используя файл CSS .

2. Почему вы используете display:flex в нескольких местах, но не задаете никаких других связанных с флексом свойств?
   Попробуйте удалить это из const InputBox = styled.span и const StyledKeyboard = styled.span

Это исправит это для вас? Пример песочницы . Рендеринг вывода .

Answer 2

Хороший простой способ - передать box-sizing: border-box родительскому элементу. Чтобы быть в безопасности, вы можете сделать это на уровне компонента root:

* {
  ...;
  box-sizing: border-box;
}

Answer 3

Это проблема размера коробки. Вы можете прочитать больше здесь . Я также рекомендую не использовать display: flex. Может быть, попробовать изменить цвет фона на прозрачный? Надеюсь, это поможет!

Answer 4

Просто примените фоновый цвет или прозрачный к полю ввода, и это решит проблему границы

.muXee{
    background-color: transparent;
//OR background:none
}