Các phần của biên giới div bị cắt

Tôi có một phần tử chứa đang giữ một vài phần tử khác, nhưng tùy thuộc vào kích thước màn hình của chúng, phần bị cắt không thể giải thích được ở các phần khác nhau. Bạn có thể quan sát hành vi trên liên kết hộp cát mã của tôi, khi trang HTML được điều chỉnh theo chiều rộng (bằng cách nhấp và kéo nó). Làm cách nào tôi có thể đảm bảo rằng chỉ đường viền container chính được hiển thị và các phần tử con không có bất kỳ tác động nào?

https://codesandbox.io/s/f 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>
  );
}

Giống như những người bình luận khác, tôi hoàn toàn có thể nhận ra lỗi bạn đang báo cáo, nhưng nó có vẻ như là một box-sizingvấn đề. Khi xem xét DOM được kết xuất qua https://k7ywy.codesandbox.io/ chúng ta có thể thấy box-sizing:border-boxkhông được áp dụng cho phần tử trình bao bọc hoặc các phần tử bên trong, nhưng nó được sửa trong đoạn trích bạn đã dán trong câu hỏi.

Tôi nhận thấy một vài điều tôi sẽ hỏi.

1. Tại sao không áp dụng box-sizingcho tất cả mọi thứ? Thông thường khi giao dịch width:100%;và padding/ border/ margin, nó làm cho cuộc sống dễ dàng hơn nhiều!
   Trong ví dụ của tôi, tôi đã loại bỏ nó khỏi JS và áp dụng nó bằng tệp CSS.

2. Tại sao bạn sử dụng display:flexở nhiều nơi nhưng không khẳng định bất kỳ thuộc tính nào khác liên quan đến flex?
   Hãy thử loại bỏ nó khỏi const InputBox = styled.spanvàconst StyledKeyboard = styled.span

Điều đó có sửa nó cho bạn không? Ví dụ hộp cát . Kết xuất đầu ra .

Chỉ áp dụng nền không hoặc trong suốt cho trường đầu vào và điều này sẽ giải quyết vấn đề viền

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

Đây là một vấn đề kích thước hộp. Bạn có thể đọc thêm ở đây . Tôi cũng khuyên bạn không nên sử dụng display: flex. Có thể thử thay đổi màu nền để trong suốt? Hi vọng điêu nay co ich!

Một cách dễ dàng tốt đẹp là cung cấp box-sizing: border-boxcho các yếu tố cha mẹ. Để an toàn, bạn có thể làm điều này ở cấp thành phần gốc:

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