Overflow auto on unknown children height - css

Question

I have an element (on which I know the width & height, I can't remove the height) with some elements inside. I've simplified it in the snippet so I just have a title (with unknown length) and a list.
I need the list (only the list, not the whole container) to be overflow: auto but I can't figure it out since I don't know its height and I can't use flexbox (IE9+ :/).
I want to avoid using JavaScript for this (I can do it in JavaScript but I really don't want a FOUC).
div {
margin: 20px;
padding: 15px;
border: 1px solid;
width: 200px;
height: 400px;
}
h1 {
margin-top: 0;
border: 1px dashed red;
}
ul {
margin: 0;
padding: 0;
overflow: auto;
}
li {
display: block;
padding: 5px 0;
border-top: 1px solid;
}
<div>
<h1 contenteditable>
My long title that can be on multiple lines
</h1>
<ul>
<li>a list</li>
<li>of element</li>
<li>that can</li>
<li>be long</li>
<li>that should</li>
<li>overflow auto</li>
<li>bla</li>
<li>bla</li>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
</div>

Answer 1

You cannot make the height of both dynamic, without something like JavaScript.
For one to overflow, it needs a reference. Why would the list overflow but not the header for example?
You can go set the list position to absolute, but then you need coordinates for top and bottom, which you won't have because in CSS you can't get that from other element (the header).
Without something like flex, you other option is JS I think.
You can render the header and list with visibility hidden (not display block, so their dimentions can be calculated), and remove that once you apply your JS for minimal FLOC effect.

Answer 2

just add overflow-y: auto; to your container element
.wrapper {
margin: 20px;
padding: 15px;
border: 1px solid;
width: 200px;
height: auto;
display: inline-block;
}
h1 {
margin-top: 0;
border: 1px dashed red;
float: left;
}
.container {
overflow-y: auto;
height: 300px;
width: 100%;
float: left;
}
ul {
margin: 0;
padding: 0;
overflow: auto;
}
li {
display: block;
padding: 5px 0;
border-top: 1px solid;
word-break: break-word;
}
<div class="wrapper">
<h1 contenteditable>
My long title that can be on multiple lines
</h1>
<div class="container">
<ul>
<li>a list</li>
<li>of element</li>
<li>that can</li>
<li>be long</li>
<li>that should</li>
<li>overflow auto</li>
<li>blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
<li>bla</li>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
<div>
</div>

Answer 3

If you can't use flexbox, use CSS tables:
Set the height of the table
Set height: 0 to the title cell to make it be only as tall as required by its contents.
Wrap the ul inside a table-row, which will take the remaining space left by the title.
Take the ul out-of-flow (to avoid circular definitions) and make it have the same sizes as that wrapper.
#container {
display: table;
margin: 20px;
padding: 15px;
border: 1px solid;
width: 200px;
height: 400px;
}
#container > h1 {
display: table-cell;
height: 0;
margin-top: 0;
border: 1px dashed red;
}
#container > div {
display: table-row;
position: relative;
}
#container ul {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
overflow: auto;
}
li {
display: block;
padding: 5px 0;
border-top: 1px solid;
}
<div id="container">
<h1 contenteditable>
My long title that can be on multiple lines
</h1>
<div>
<ul>
<li>a list</li>
<li>of element</li>
<li>that can</li>
<li>be long</li>
<li>that should</li>
<li>overflow auto</li>
<li>bla</li>
<li>bla</li>
<li>bla</li>
<li>bla</li>
<li>bla</li>
</ul>
</div>
</div>

Answer 4

Here my JS solution for now, I'd like to have it in CSS if possible but it's working in the meantime:
const height = container.clientHeight - list.offsetTop
list.style.height = height + 'px'

Answer 5

There are couple of ways to do it
First would be just remove the height prop on div.
If you don't want to do so.. you can either choose to cut (overflow:hidden) or scroll overflow:scroll the list
ie, you div styling can be:
div {
margin: 20px;
padding: 15px;
border: 1px solid;
width: 200px;
height: 400px;
overflow: scroll; /* or hidden */
}
or just
div {
margin: 20px;
padding: 15px;
border: 1px solid;
width: 200px;
}
EDIT:If you dont want the whole container to overflow (as said in comments) just add max-hight to ul
your ul styling would be something like:
ul {
margin: 0;
padding: 0;
max-height: 100px; /*or anything you think appropriate */
overflow: auto;
}
and rest of the css can be same as in OP.