How to give that block the correct height? Read here.
How can I make a div grow its height when it has floats inside of it? I know that defining a value for the width and setting overflow to hidden works. The problem is that I need a div with the overflow visible.
The answer is this: In order for a parent to wrap around children elements which are floated, a new block formatting context needs to be set on the parent. This can be done with:
.wrap {
display: flow-root;
}
or
.wrap {
contain: layout;
}
The latter is a bit newer. Either of these have an advantage over overflow: auto; because they have the explicit purpose of creating a new block formatting context, while overflow: auto works as a side effect. Interestingly, flow-root can be also used alongside block or inline for better layout control. For example:
.wrap {
display: inline flow-root;
}
Read more:
That’s all folks!
Have a nice day…