Div with height 100% and overflow: auto in <= IE10

Question

I am having trouble while dealing with a strange issue which occurs only in <= IE 10. Other browsers work as intended. Basically, the ul.list doesn't expand to 100% if overflow:auto is used in <= IE 10 .

Fiddle . JS Fiddle doesn't work in older versions of IE. I think it won't work in IE 10 as well.

The HTML:

<div id="container">
    <div class="table">
        <div class="row">
            <div class="container">
                <ul class="list">
                    <li>Hello!</li>
                    <li>If I understand what you're trying to do correctly, then I don't think this is possible with CSS while keeping the children absolutely positioned.</li>
                    <li>The div needs its parent to have a defined height before 100% height works, however that's not an option for you as you've already stated that this is all dynamic content. No problem. We just need the jQuery to push the calculated height to the div after the browser has already rendered it. Simple enough, right?</li>
                    <li>If I understand what you're trying to do correctly, then I don't think this is possible with CSS while keeping the children absolutely positioned.</li>
                    <li>And once we get the truth from the TD, we tell the div that the size its parent has reported is the size that it needs to be, and give it back its contenthas reported is the size that it needs to be, and give it back its content.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS:

#container {
    width: 300px;
    height: 350px;
}
.table {
    width:100%;
    height: 100%;
    display: table;
}
.row {
    width: 100%;
    height: 100%;
    background: green;
    display: table-row;
}
.container {
    position: relative;
    width: 100%;
    height: 100%;
}
.list {
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

I wonder why doesn't it work it in <= IE 10. I know IE has its own rendering engine but it works in IE Edge.

I need to position the list absolute because we cannot set max height on a table row. Also, I cannot set max-height: 100% because table row always fit its content.

Edit:

I need table based layout so, I can more rows of fixed height. The one with a list will cover the rest of the height available.

I think the problem is that a div with height: 100% in a table row doesn't work. If we look in the layout tab in developer tools we can see. The table row sets its height to 100% but its children won't get a height of 100% . Is there workaround for it?

Answer 1

Add display: table-cell and overflow: auto to .container so, it expands to fill the row and shows a scrollbar when content is large. You don't need to add overflow: auto to ul.list since they are confusing to have on an ul . Also, make sure you add width: 100% and height: 100% so, it covers the parent.

See it in action here .