Make a div as large as possible in flexLayout - html

Question

#container {
display: flex;
flex-direction: column;
align-items: center;
height: 200px;
width: 100px;
background-color: red;
}
#stack{
display: flex;
flex-direction: column;
align-items: center;
max-height: 200px;
}
.item {
display: flex;
height: 30px;
width: 100px;
background-color: green;
flex-shrink: 0;
}
.spacer {
display: flex;
height: 200px;
flex-shrink: 1000;
}
<div id="container">
<div class="stack">
<div class="item">a</div>
<div class="spacer"></div>
<div class="item">b</div>
</div>
</div>
As the code shows above, parent had a max-height as the height of it is undefined.
I want the height of spacer was as large as possible. And what I expect is 160px in this situation.
I had tried flex-grow, but it doesn't work as the container has no height.
I had tried flex-shrink and a large height like the code in snippet either. But I found that sometime flex-shrink not work, or sometimes it looks scary with a very large height.

Answer 1

it does not work because you use a wrong selector for "stack" - it is a class, not id!
This should work: https://jsfiddle.net/bL5w81d4/1/
#container {
display: flex;
flex-direction: column;
align-items: center;
height: 200px;
width: 100px;
background-color: red;
}
.stack{
display: flex;
flex-direction: column;
align-items: center;
max-height: 200px;
}
.item {
display: flex;
height: 30px;
width: 100px;
background-color: green;
flex-shrink: 0;
}
.spacer {
display: flex;
height: 200px;
flex-shrink: 1000;
}