Części granicy div są odcinane

Mam element kontenerowy, który zawiera kilka innych elementów, ale w zależności od rozmiaru ekranu ich części są niewytłumaczalnie odcinane w różnych częściach. Możesz obserwować zachowanie mojego linku do piaskownicy kodu, gdy szerokość strony HTML jest dostosowywana (poprzez kliknięcie i przeciągnięcie). Jak mogę się upewnić, że renderowana jest tylko główna granica kontenera i że elementy potomne nie mają żadnego wpływu?

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

Podobnie jak inni komentatorzy, całkiem dobrze rozumiem zgłaszany błąd, ale dla mnie to brzmiało jak box-sizingproblem. Podczas przeglądania renderowanego modelu DOM za pośrednictwem https://k7ywy.codesandbox.io/ możemy zobaczyć, box-sizing:border-boxże nie jest on stosowany do elementu opakowania ani elementów wewnętrznych, ale jest ustalony we fragmencie wklejonym w pytaniu.

Zauważyłem kilka rzeczy, które zadałbym.

1. Dlaczego nie zastosować box-sizingdo wszystkiego? Zwykle, gdy masz do czynienia z width:100%;i padding/ border/ margin, życie jest o wiele łatwiejsze!
   W moim przykładzie usunąłem go z JS i zastosowałem przy użyciu pliku CSS.

2. Dlaczego używasz display:flexw wielu miejscach, ale nie zakładasz żadnych innych właściwości związanych z flexem?
   Spróbuj usunąć to z const InputBox = styled.spaniconst StyledKeyboard = styled.span

Czy to dla ciebie to rozwiązuje? Przykład piaskownicy . Renderowane dane wyjściowe .

Po prostu zastosuj brak tła lub transparent do pola wprowadzania, a to rozwiąże problem z ramką

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

To kwestia zmiany rozmiaru pudełka. Możesz przeczytać więcej tutaj . Polecam również nie używać display: flex. Może spróbuj zmienić kolor tła na przezroczysty? Mam nadzieję że to pomoże!

Łatwym łatwym sposobem jest podanie box-sizing: border-boxelementu nadrzędnego. Aby być bezpiecznym, możesz to zrobić na poziomie składnika głównego:

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