Can you explain why a parent div element stops adjusting its height when its child is floated? Here is the HTML snippet:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div id="container">
<div id="overflown_container">
<button class="button">Button</button>
<button class="button" style="height:80px; float: right">Overflown button</button>
</div>
</div>
</body>
</html>
And here's the CSS:
#container {
background-color: blue;
width: 60vw;
margin: auto;
}
#overflown_container {
background-color: red;
margin-bottom: 10px;
}
.button {
float: bottom;
height: 44px;
padding: 10px;
border: 5px solid yellow;
margin: 0 0 10px 0;
}
The current result is displayed in this image https://i.sstatic.net/2Jmi2.png.
If I add the overflow: auto attribute to the overflown_container, it adjusts its height. But I don't want to add overflow attributes to all containing elements up to the root. I also want to align both buttons at the bottom but floating Button1 to the overflown area seems impossible.
Why does floating a button to the right cause overflow? How can we avoid this and achieve a design where both buttons are at opposite ends of the container, may or may not have fixed dimensions, are aligned at the bottom, and allow the containers to grow without overflowing?