Se cortan partes del borde div

Tengo un elemento contenedor que contiene algunos otros elementos, pero dependiendo del tamaño de la pantalla, partes de ellos se cortan inexplicablemente en varias partes. Puede observar el comportamiento en el enlace de mi sandbox de código, cuando la página HTML se ajusta en ancho (haciendo clic y arrastrándola). ¿Cómo puedo asegurarme de que solo se representa el borde del contenedor principal y que los elementos secundarios no tienen ningún impacto?

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

Al igual que los otros comentaristas, puedo distinguir el error que está informando, pero me pareció un box-sizingproblema. Al revisar el DOM representado a través de https://k7ywy.codesandbox.io/ , podemos ver box-sizing:border-boxque no se aplica al elemento contenedor o a los elementos internos, pero se repara en el fragmento que pegó en la pregunta.

Noté algunas cosas que cuestionaría.

1. ¿Por qué no aplicar box-sizinga todo? Por lo general, cuando se trata width:100%;y padding/ border/ margin, hace la vida mucho más fácil.
   En mi ejemplo, lo eliminé del JS y lo apliqué usando el archivo CSS.

2. ¿Por qué estás usando display:flexen varios lugares pero no estás evaluando ninguna otra propiedad relacionada con flex?
   Intenta eliminar eso de const InputBox = styled.spanyconst StyledKeyboard = styled.span

¿Eso te lo arregla? Ejemplo de caja de arena . Salida renderizada .

Simplemente aplique el fondo ninguno o transparente al campo de entrada y esto resolverá el problema del borde

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

Es un problema de tamaño de caja. Puedes leer más aquí . También te recomiendo que no lo uses display: flex. ¿Quizás intente cambiar el color de fondo a transparente? ¡Espero que esto ayude!

Una manera fácil y agradable es dar box-sizing: border-boxal elemento padre. Para estar seguro, puede hacer esto en el nivel del componente raíz:

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