Contained element overflowing container despite box-sizing

Question

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

score 0 · Accepted Answer · answered Aug 21 '17 at 15:05

0

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.

https://jsfiddle.net/m08tsvzf/1/

answered Aug 21 '17 at 15:05

Johannes

64,305
18
73
130

Thanks, I'll try that. But why doesnt it just fill the available space after the hight of the input? That's the behaviour I'd expect – ministe Aug 21 '17 at 15:46
because you gave it 100% height, and those 100% relate to the parent element – Johannes Aug 21 '17 at 16:18
I realise it wants to fill 100% of its parent, but I'm sure I've done similar things in the past and been able to get it to fill the parent's *leftover* height without having to explicitly calculate it. I guess until I figure out what I used (or that I'm wrong!) this is the method I'll use, so I'll mark this correct. Thanks – ministe Aug 22 '17 at 16:56

swogat · Answer 2 · 2017-08-21T16:31:13.937

0

i didn't get your question. is this what you want??

Snapshot

if yes then these are the changes in css

main, section, article{
height: 100%;
width: 100%;
margin:5px;
}
textarea{
   height:120%;
   width:1000%;
   max-height:100%;
   max-width:100%;
}


textarea.resize-none {
resize: none; 
 }

main{
background: yellow;
height:100%;
}

#left{
width: 100%;
background: blue;
height: 100%
}

#refresh{
margin-top: -30px;
float:left;
position :relative;
}

edited Aug 21 '17 at 16:31

answered Aug 21 '17 at 15:55

swogat

1
4

Basically I'm asking why does the article and the textarea within it, overlap the section it is inside? The width of the "left" element is irrelevant. Why have you floated the button? – ministe Aug 21 '17 at 15:57
I have edited the answer. check it. There is no reason for floating the refresh to right. For limiting the size of each tag to that of there parent tag use max-height and max-width. you can see i have given the width of the text area to 1000px but that doesn't affect my output cause the max-width is defined 100% – swogat Aug 21 '17 at 16:27

Contained element overflowing container despite box-sizing

2 Answers2