Части границы раздела обрезаются

У меня есть элемент контейнера, который содержит несколько других элементов, но в зависимости от размера экрана их части необъяснимым образом обрезаются на разные части. Вы можете наблюдать за поведением по моей ссылке в песочнице кода, когда 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>
  );
}

Как и другие комментаторы, я вполне могу разобрать ошибку, о которой вы сообщаете, но она показалась мне 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

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

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

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

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

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

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