Auto scrolling breaking height restrictions - css

Question

broken height
How it looks when overflow: auto is not active
So, I had the height working perfectly as it filled the remaining space of a 100vh app container (blue border line), but when I added overflow: auto to the .action-list and added enough items that it required the overflow to activate suddenly the height is breaking past the app container and pushing past the bottom of the viewport. I have tried every height manipulation of .action-list possible to no avail. I was able to make the whole thing fit perfectly if I changed the .action-container or .action-plate to a smaller percentage of height but that breaks the height to something too small if the overflow: auto is not active. I'm at my wits end.
(.app is in a separate css file. All colored borders are included for reference only.)
.app {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
border: 1px blue solid;
}
.app-container {
margin: 0 0 30px 0;
padding: 0;
box-sizing: border-box;
height: 100%;
width: 100%;
border: 1px solid green;
}
.action-plate {
height: 100%;
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
.action-container {
width: 85%;
height: 89%;
background: black; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #9A070E, #9e4676, #f98a2f93); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #4e080b63, #77335a48, #b6662457); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
border-radius: 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 2px 1px 18px rgb(202, 202, 202);
border: 1px thistle solid;
}
.action-list {
width: 100%;
overflow: auto;
box-sizing: border-box;
}
.add-item {
margin: 10px;
box-sizing: border-box;
}

Answer 1

Make your list container flexible with flex-grow so it fills the available space, and change the default min-height: auto to allow the list container to shrink.
Seeing your HTML markup would help in understanding what’s going on here. But it seems like .action-plate is unable to resolve its height: 100%, so it behaves as thought height was auto, which in this case means it will try to size itself based on the height of its content. And that’s why it’s growing so big instead of staying within its 100vh container.
To get the effect you want, you could take advantage of Flexbox properties instead of using percentages.
The header and the tabs should be the size of their content, so we don’t need to do anything extra there.
The container for the list should take up all the remaining space in the app container — not more, and not less. To make sure it grows to fill the available space, we set flex-grow: 1 (by default flex items have flex-grow: 0).
Next, flex items will try to preserve their min-content size by default. This basically means your flex item will try to at least have the size to contain all of its items. This is why it grows beyond the app container.
So instead of its default min-height: auto, we will give it min-height: 0. That means that if you have lots of content, your flex item will no longer try to “protect” its size, and will shrink to fill the size of the container.
Here’s a working example:
body {
margin: 0;
color: white;
}
.app {
display: flex;
flex-direction: column;
height: 100vh;
width: 320px; /* just to illustrate the working example */
height: 480px; /* just to illustrate the working example */
box-sizing: border-box;
background-color: black;
}
header {
text-align: center;
}
.nav-list {
display: flex;
list-style-type: none;
padding: 0;
justify-content: space-evenly;
}
.todo-list-container {
flex-grow: 1;
padding: 16px;
min-height: 0;
overflow: auto;
}
.todo-list-content {
background-color: burlywood;
}
.todo-item {
font-size: 32px;
}
<main class="app">
<header><h1>Exist Better</h1></header>
<nav>
<ul class="nav-list">
<li>Routines</li>
<li>Behaviors</li>
<li>To Dos</li>
</ul>
</nav>
<div class="todo-list-container">
<div class="todo-list-content">
<ul class="todo-list">
<li class="todo-item">Routine 1</li>
<li class="todo-item">Routine 2</li>
<li class="todo-item">Routine 3</li>
<li class="todo-item">Routine 4</li>
<li class="todo-item">Routine 5</li>
<li class="todo-item">Routine 6</li>
<li class="todo-item">Routine 7</li>
<li class="todo-item">Routine 8</li>
<li class="todo-item">Routine 9</li>
<li class="todo-item">Routine 10</li>
</ul>
<button>Add a new routine</button>
</div>
</div>
</main>