Inside a container of variable height, I have multiple nested lists that I want to take up all the available space.
I attempted to use flexbox for this purpose, but performance issues arose in Chrome, FF, and Safari when dynamically adding more nested lists (perhaps due to reflows). Therefore, flexbox is not a viable solution in this scenario. Using table and table-cell also did not yield the desired result.
Here is a basic example: https://jsfiddle.net/bf0f6zj5/
The HTML structure:
<ul>
<li>
<div>
text 1
</div>
<ul>
<li>
<div>
some very long text here
</div>
<ul>
<li>
<div>
text 3
</div>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
The CSS styling:
ul, li {
margin:0;
padding:0;
list-style-type: none;
overflow:hidden;
}
li {
border-left: 1px solid grey;
padding-left: 8px;
}
li > div {
padding-right: 4px;
float:left;
writing-mode: vertical-rl;
}
The objective is to ensure that the left borders of all nested lists are equal in height to the tallest one, without relying on flexbox.
Edit: For demonstration purposes, another fiddle is available at https://jsfiddle.net/vgjkzhqq/3/ showcasing the performance challenges with flexbox (takes over 2000ms to render)
Edit 2: Updated link provided