I am looking to design a 2-row layout for a webpage where one row will contain filters and the other row will display results. The layout should meet the following criteria:
- The page height should not exceed 100%
- The first row's height will vary based on its content, which can be modified by JavaScript functions
- The second row's height should be the difference between 100% and the height of the first row
- The "list" div in the second row must have overflow enabled and cannot be moved to the "result" div
HTML:
<div class="main">
<div class="filter">
<div class="filtercontent">
filter content
</div>
</div>
<div class="result">
<div class="resultcontent">
<div class="list">
<div class="listcontent">
list content
</div>
</div>
</div>
</div>
</div>
CSS:
.main {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.filter {
width: 100%;
}
.result {
width: 100%;
}
.resultcontent {
height: 100%;
width: 100%;
}
.list {
height: 100%;
width: 100%;
overflow: auto;
}
.listcontent {
height: 1000px;
width: 2000px;
}
I have experimented with various flexbox configurations but I'm struggling to achieve the desired outcome regarding the placement of the "list" div.
NOTE: I am restricted from using JavaScript to adjust row heights. I am seeking a CSS-only solution. Thank you!