I have looked at every similar question on Stack Overflow but none of them address this specific scenario.
HTML:
<div class="container">
<div class="top">Top area</div>
<div class="bottom">
<div class="left">
<div class="filters">Filters</div>
<div class="scrollContainer">
<ul class="item">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>0</li>
</ul>
</div>
</div>
<div class="main">Main area</div>
</div>
</div>
CSS:
body {
height: 100%;
margin: 0;
background-color: #F5F5F5;
overflow: hidden;
}
.top {
height: 150px;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
background-color: #594255;
overflow: hidden;
}
.bottom {
display: flex;
flex-direction: row;
height: 100%;
overflow: hidden;
}
.left {
overflow: hidden;
}
.scrollContainer {
overflow: scroll;
}
.item {
margin: 1px;
background-color: #fff;
text-align: center;
line-height: 100px;
font-weight: bold;
font-family: sans-serif;
font-size: 3em;
color: #594255;
flex: 1;
}
ul {
list-style-type: none;
}
I want the white div to scroll when it overflows, and everything else stay fixed. What is the simplest way to achieve this without using fixed (pixel) heights?
2
Answers
You need to have some fixed height somewhere along the line to trigger the overflow. That, along with flex properties, should do the trick in this case for taller screens. You’ll still need to decide what height you want for shorter screens. Here’s an example:
In your case, you only need to set the height for the wrapper (currently this
html
), this will be enough. And thenflexbox
will do everything: