Parts of div border being cut off

Question

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?

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

Answer 1

Like the other commenters, I can quite make out the error you are reporting, but it sounded to me like a box-sizing issue. When reviewing the rendered DOM via https://k7ywy.codesandbox.io/ we can see box-sizing:border-box is not being applied to the wrapper element or the internal elements, but it is fixed in the snippet you pasted in the question.

I noticed a few things I'd question.

1. Why not apply box-sizing to everything? Usually when dealing with width:100%; and padding / border / margin , it makes life so much easier!
   In my example I removed it from the JS and applied it using the CSS file.

2. Why are you using display:flex in multiple places but not assinging any other flex-related properties?
   Try removing that from const InputBox = styled.span and const StyledKeyboard = styled.span

Does that fix it for you? Sandbox example . Rendered output .

Answer 2

Just apply background none or transparent to input field and this will resolve border issue

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

Answer 3

It's a box-sizing issue. You can read more here . I also recommend you don't use display: flex . Maybe try changing the background color to transparent? Hope this helps!

Answer 4

A nice easy way is to give box-sizing: border-box to the parent element. To be safe, you can do this at the root component level:

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