I have 3 nesting html components, lets call them A, B, and C.A fills the viewport, has:
width: 100%; height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start;B has:
display: flex; column-gap: 8px; flex: 1; min-height: 0;And C's height is super high.
Currently, it works fine, C will be shrunk to the viewport height and the overflow of C's child will work (there will be a scrollbar in C's child). However, if I remove the min-height:0 on B, C will stretch B and make it higher than the viewport.
Why is the min-height: 0 important? How does it affect height calculation, is there any documentation? The MDN page of min-height didn't say anything about this.
