Need assistance with a container that has two children: a list and a button.
The button should have a fixed height of 40px. When the list is set to "flex: 1", it grows to take up all the space in the container except for the 40px used by the button at the bottom.
How can I make the list grow based on its content (like a regular div), but limit it to consuming all available space without overflowing if the content is too large?
Here's the HTML snippet:
.container {
display: flex;
height: 300px;
width: 100px;
flex-direction: column;
}
.list {
display: flex;
flex: 1;
overflow-y: scroll;
}
.button {
display: flex;
height: 40px;
}<div class="container">
<div class="list">
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
</div>
<div class="button">
View
</div>
</div>Check out this example: https://jsfiddle.net/odrbey4c/
The first container's list should not take up all the space, just behave like a normal div. The list in the second container is working as expected.