Partes da borda div sendo cortadas

Eu tenho um elemento container que contém alguns outros elementos, mas dependendo do tamanho da tela, partes deles são inexplicavelmente cortadas em várias partes. Você pode observar o comportamento no link da minha sandbox de código, quando a página HTML é ajustada em largura (clicando e arrastando-a). Como garantir que apenas a borda principal do contêiner seja renderizada e que os elementos filhos não tenham nenhum 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>
  );
}

Como os outros comentadores, posso entender o erro que você está denunciando, mas me pareceu um box-sizingproblema. Ao revisar o DOM renderizado via https://k7ywy.codesandbox.io/ , podemos ver que box-sizing:border-boxnão está sendo aplicado ao elemento wrapper ou aos elementos internos, mas é corrigido no snippet que você colou na pergunta.

Notei algumas coisas que questionaria.

1. Por que não aplicar box-sizinga tudo? Geralmente, quando se lida com width:100%;e padding/ border/ margin, torna a vida muito mais fácil!
   No meu exemplo, eu o removi do JS e o apliquei usando o arquivo CSS.

2. Por que você está usando display:flexem vários lugares, mas não atribuindo outras propriedades relacionadas a flex?
   Tente remover isso const InputBox = styled.spaneconst StyledKeyboard = styled.span

Isso corrige isso para você? Exemplo de sandbox . Saída renderizada .

Basta aplicar o fundo nenhum ou transparente ao campo de entrada e isso resolverá o problema de fronteira

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

É uma questão de tamanho de caixa. Você pode ler mais aqui . Eu também recomendo que você não use display: flex. Talvez tente alterar a cor do plano de fundo para transparente? Espero que isto ajude!

Uma maneira fácil e agradável é fornecer box-sizing: border-boxao elemento pai. Para estar seguro, você pode fazer isso no nível do componente raiz:

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