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래퍼 요소 또는 내부 구성 요소에 적용되는되지 않습니다,하지만 스 니펫에 고정되어 당신은 질문에 붙여 넣기.

몇 가지 질문을 받았습니다.

1. 왜 box-sizing모든 것에 적용되지 않습니까? 일반적으로 width:100%;및 padding/ border/ 처리 할 때 margin인생이 훨씬 쉬워집니다!
   내 예에서는 JS에서 제거하고 CSS 파일을 사용하여 적용했습니다.

2. 왜 display:flex여러 곳에서 사용 하고 다른 플렉스 관련 속성을 요구하지 않습니까?
   에서 그것을 제거하려고 const InputBox = styled.span하고const StyledKeyboard = styled.span

그게 당신을 위해 고치나요? 샌드 박스 예 . 렌더링 된 출력 .

입력 필드에 배경을 없거나 투명하게 적용하면 테두리 문제가 해결됩니다.

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

상자 크기 문제입니다. 자세한 내용은 여기를 참조 하십시오 . 또한 사용하지 않는 것이 좋습니다 display: flex. 배경색을 투명하게 변경해보십시오. 도움이 되었기를 바랍니다!

좋은 쉬운 방법은 box-sizing: border-box부모 요소 를 제공 하는 것입니다. 안전을 위해 루트 구성 요소 레벨에서이를 수행 할 수 있습니다.

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