title: Parts of div border being cut off
body: <p>I have a container element that is holding a few other elements, but depending on the screen size parts of them are inexplicably cut off at various portions. You can observe the behaviour on my code sandbox link, when the HTML page is adjusted in width (by clicking and dragging it). How can I ensure that only the main container border is rendered, and that the child elements do not have any impact?</p>
  
  <p><a href="https://i.stack.imgur.com/r6wAE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/r6wAE.png" alt="border"></a></p>
  
  <p><a href="https://codesandbox.io/s/focused-tree-ms4f2" rel="noreferrer">https://codesandbox.io/s/focused-tree-ms4f2</a></p>
  
  <pre><code>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;
    &gt; * {
      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 (
      &lt;StyledTextBox&gt;
        &lt;InputBox&gt;
          &lt;UserInput /&gt;
        &lt;/InputBox&gt;
        &lt;SolutionBox/&gt;
        &lt;StyledKeyboard/&gt;
      &lt;/StyledTextBox&gt;
    );
  }
  </code></pre>