What's causing this resizable div to overflow its 100% height container? - html

Question

If you drag the resizeable yellow div up to its maximum possible height, it will overflow and a scrollbar is displayed.
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container {
height:100%;
width: 100%;
background-color: red;
display: table;
}
.header {
background-color: green;
height:100%;
display: table-row;
}
.content {
width:100%;
height: auto;
background-color:white;
display: table-row;
}
.control {
resize: vertical;
overflow: auto;
background-color: yellow;
}
<div class="container">
<div class="header"> </div>
<div class="content">
<div class="control"> </div>
</div>
</div>
What's causing this and how can I prevent it?

Answer 1

It's because the yellow box keeps getting bigger until it overflows the container; you can prevent this using CSS max-height: 100%. The problem with this is that the container keeps expanding as the yellow box expands, so the yellow box never actually fills the available space. I fixed this by giving the container position: relative and the resizable control position: absolute.
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container {
height:100%;
width: 100%;
background-color: red;
display: table;
position: relative;
}
.header {
background-color: green;
height:100%;
display: table-row;
}
.content {
width:100%;
height: auto;
background-color:white;
display: table-row;
}
.control {
position: absolute;
bottom: 0;
height: 20px;
left: 0;
right: 0;
resize: vertical;
overflow: auto;
background-color: yellow;
max-height: 100%;
}
<div class="container">
<div class="header"> </div>
<div class="content">
<div class="control"> </div>
</div>
</div>