I'm facing an issue with styling a component that is taller than its flex container. My goal is to have a scroll appear for the component when it exceeds the height of the flex container, while keeping the footer at the bottom of the parent container. I am aware that adding height: 0 to the table element in the example below can fix the problem, but I suspect there might be a better solution.
Here is the Stackblitz link for reference: https://stackblitz.com/edit/js-myxsza?file=index.html`
.container {
width: 80vw;
height: 50vh;
}
.wraper1 {
background: green;
display: flex;
flex-direction: column;
position: relative;
height: 100%;
}
.title {
margin-bottom: 30px;
}
.body {
flex-grow: 1;
}
.component-wraper {
display: flex;
flex-direction: column;
height: 100%;
overflow: auto;
}
/* table {
height: 0;
} */<div class="container">
<div class="wraper1">
<div class="title">Title</div>
<div class="body">
<div class="component-wraper">
<table>
<tr><td>1</td></tr>
...
...
<tr><td>1</td></tr>
</table>
</div>
</div>
<div class="footer">footer</div>
</div>
</div>