I am trying to implement a full-height layout for complex app, which can contain huge tree of components. It should work the following way: The parent div has the following style:
.wrapper {
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
Some child component should have style flex-grow: 1 to fill all accessible space. But child component which should stretch can have its own footer, which has to stick to the bottom. For that purpose I wrap this child component in container with the following class:
.fullh {
flex-grow: 1;
display: flex;
flex-flow: column nowrap;
align-items: stretch;
}
flex-grow style tells its parent what this component has to fill all free space, and rest styles for its children. It sounds reasonable, at least for me, but I've faced with a problem. I've simplified my code as much as possible to quite simple example, there a problem is still appearing.
https://jsfiddle.net/DonTomato/vqp9wLx8/80/
In case table has few rows all works as expected:
In case a table contains more rows and it doesn't fit his place, scoll-container block shouldn't change his size and scroll should be appeared. Like on this picture:
But that I get in reality:
Can anyone explain the reason? And to fix that?
