I'm struggling to figure out why I have an element with height:100% which is larger than its container despite box-sizing being set to border-box;
I've made a fiddle here: https://jsfiddle.net/a8v9a8ok/6/
I've set elements to 100% height and box-sizing to border-box yet the article contained in the section called "left" is flowing past the section and text textarea it contains is also flowing past.
html, body {
height: 100%;
width: 100%;
}
html {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-moz-box-sizing: inherit;
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
I don't just want to hide the overflow, I want the elements to remain contained within their container and fill that respective container to 100%.
I'm sure this is an easy fix but I've been trying hour hours to no avail so any help would be greatly appreciated!
EDIT: I am simply trying to have all the elements fit within their respective containers without overlapping vertically. I would expect that setting the textarea height to 100% should cause it to fill the remaining space in its container.
Thanks
Your article element has two children: An inputelement and the textarea, which has height: 100% . So articles's height adds up to 100% plus the height of the input element. That's why it overflows.
To fix that, you could give a fixed height to input , for example 40px, and use height: calc( 100% - 60px) ; (subtracts the 40px height plus 2 x 10px for margin top and bottom) on that article.