Bagian perbatasan div terputus

Saya memiliki elemen kontainer yang memegang beberapa elemen lain, tetapi tergantung pada ukuran layar bagian dari mereka terputus di berbagai bagian. Anda dapat mengamati perilaku pada tautan sandbox kode saya, ketika halaman HTML disesuaikan lebarnya (dengan mengklik dan menariknya). Bagaimana saya bisa memastikan bahwa hanya batas kontainer utama yang diberikan, dan bahwa elemen anak tidak memiliki dampak apa pun?

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

Seperti para komentator lainnya, saya bisa melihat kesalahan yang Anda laporkan, tetapi menurut saya itu seperti box-sizingmasalah. Saat meninjau DOM yang diberikan melalui https://k7ywy.codesandbox.io/ kita dapat melihat box-sizing:border-boxtidak sedang diterapkan ke elemen pembungkus atau elemen internal, tetapi diperbaiki dalam cuplikan yang Anda tempelkan dalam pertanyaan.

Saya perhatikan beberapa hal yang akan saya pertanyakan.

1. Mengapa tidak berlaku box-sizinguntuk semuanya? Biasanya ketika berhadapan dengan width:100%;dan padding/ border/ margin, itu membuat hidup jadi lebih mudah!
   Dalam contoh saya, saya menghapusnya dari JS dan menerapkannya menggunakan file CSS.

2. Mengapa Anda menggunakan display:flexdi banyak tempat tetapi tidak mengasumsikan properti terkait flex lainnya?
   Coba hapus itu dari const InputBox = styled.spandanconst StyledKeyboard = styled.span

Apakah itu memperbaikinya untuk Anda? Contoh kotak pasir . Output yang diberikan .

Hanya menerapkan latar belakang tidak ada atau transparan untuk bidang input dan ini akan menyelesaikan masalah perbatasan

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

Ini masalah ukuran kotak. Anda dapat membaca lebih lanjut di sini . Saya juga menyarankan Anda tidak menggunakan display: flex. Mungkin mencoba mengubah warna latar belakang menjadi transparan? Semoga ini membantu!

Cara mudah yang bagus adalah memberi box-sizing: border-boxke elemen induk. Agar aman, Anda dapat melakukan ini di tingkat komponen root:

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