Parts of div border being cut off
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.
Why not apply
box-sizingto everything? Usually when dealing with
margin, it makes life so much easier!
In my example I removed it from the JS and applied it using the CSS file.
Why are you using
display:flexin multiple places but not assinging any other flex-related properties?
Try removing that from
const InputBox = styled.spanand
const StyledKeyboard = styled.span
Does that fix it for you? Sandbox example. Rendered output.