ส่วนของเส้นขอบ div ถูกตัดออก

ฉันมีองค์ประกอบคอนเทนเนอร์ที่ถือองค์ประกอบอื่น ๆ ไม่กี่ แต่ขึ้นอยู่กับส่วนขนาดหน้าจอของพวกเขาจะถูกตัดออกอย่างลึกลับในส่วนต่างๆ คุณสามารถสังเกตพฤติกรรมในลิงค์แซนด์บ็อกซ์รหัสของฉันเมื่อหน้า 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ว่าไม่ได้ถูกนำไปใช้กับองค์ประกอบของ wrapper หรืออิลิเมนต์ภายใน แต่ได้รับการแก้ไขในตัวอย่างที่คุณวางในคำถาม

ฉันสังเกตเห็นบางสิ่งที่ฉันถาม

1. ทำไมไม่ใช้box-sizingกับทุกสิ่ง โดยปกติเมื่อต้องรับมือกับwidth:100%;และpadding/ border/ marginมันทำให้ชีวิตง่ายขึ้นมาก!
   ในตัวอย่างของฉันฉันลบมันออกจาก JS และใช้มันโดยใช้ไฟล์ CSS

2. เหตุใดคุณจึงใช้งานdisplay:flexในหลายที่ แต่ไม่รวมคุณสมบัติอื่น ๆ ที่เกี่ยวข้องกับเฟล็กซ์
   ลองลบออกจากconst InputBox = styled.spanและconst StyledKeyboard = styled.span

นั่นแก้ไขให้คุณหรือไม่ ตัวอย่างเช่น Sandbox เอาท์พุทการแสดงผล

เพียงแค่ใช้พื้นหลังไม่มีหรือโปร่งใสกับช่องใส่และสิ่งนี้จะแก้ไขปัญหาชายแดน

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

มันเป็นปัญหาเรื่องขนาดกล่อง คุณสามารถอ่านเพิ่มเติมที่นี่ display: flexผมขอแนะนำให้คุณไม่ได้ใช้ อาจลองเปลี่ยนสีพื้นหลังเป็นแบบโปร่งใสหรือไม่ หวังว่านี่จะช่วยได้!

วิธีง่ายๆที่ดีคือการมอบให้box-sizing: border-boxกับองค์ประกอบหลัก เพื่อความปลอดภัยคุณสามารถทำได้ที่ระดับองค์ประกอบราก:

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