CSS - flexbox 高度 100% 不考虑儿童的高度

Question

 div.container { display: flex; flex-direction: column; height: 100%; } div.container div.block { display: flex; justify-content: center; align-items: center; } div.container div.advanced-items { display: flex; flex-direction: column; overflow-y: scroll; height: 100%; } div.container div.advanced-items span { height: 100px; }

 <div class="container"> <div class="block"> <span>some data here</span> </div> <div class="block"> <span>some data here</span> </div> <div class="advanced-items"> <span>1. item</span> <span>2. item</span> <span>3. item</span> <!-- more items here --> </div> </div>

div.advanced-items高度值设置为100% ，但它以某种方式等于整个div.container高度。 但考虑到孩子的身高，我需要填充div.container的剩余高度。

请帮帮我，如何制作？

Answer 1

考虑到儿童的身高，我需要填充div.container的剩余高度。 正是它发生了什么，看看它是如何发生的，只需向div.advanced-items添加border以查看它包裹了多少空间

 div.container { display: flex; flex-direction: column; height: 100%; border: 1px solid black; } div.container div.block { display: flex; justify-content: center; align-items: center; } div.container div.advanced-items { display: flex; flex-direction: column; overflow-y: scroll; height: 100%; border: 1px solid black; } div.container div.advanced-items span { height: 100px; }

 <div class="container"> <div class="block"> <span>some data here</span> </div> <div class="block"> <span>some data here</span> </div> <div class="advanced-items"> <span>1. item</span> <span>2. item</span> <span>3. item</span> <!-- more items here --> </div> </div>

现在你的div.advanced-items包裹了所有左边的高度，除了上面的divs包裹的高度，但你可以通过将它们的height设置为100%来使它们平均共享其父级的height

 div.container { display: flex; flex-direction: column; height: 100%; border: 1px solid black; } div.container div.block { display: flex; justify-content: center; align-items: center; height: 100%; border: 1px solid black; } div.container div.advanced-items { display: flex; flex-direction: column; overflow-y: scroll; height: 100%; border: 1px solid black; } div.container div.advanced-items span { height: 100px; }

 <div class="container"> <div class="block"> <span>some data here</span> </div> <div class="block"> <span>some data here</span> </div> <div class="advanced-items"> <span>1. item</span> <span>2. item</span> <span>3. item</span> <!-- more items here --> </div> </div>

Answer 2

你想要这样吗？ ：

 div.container { display: flex; flex-direction: column; height: 100%; } div.container div.block { display: flex; justify-content: center; align-items: center; } div.container div.advanced-items { display: flex; flex-direction: column; overflow-y: scroll; height: 100%; } div.container div.advanced-items span { height: calc(100% / var(--item-count)); min-height : 100px; }

 <div class="container"> <div class="block"> <span>some data here</span> </div> <div class="block"> <span>some data here</span> </div> <div style="--item-count:3;" class="advanced-items"> <span>1. item</span> <span>2. item</span> <span>3. item</span> <!-- more items here --> </div> </div>

或者这个？ ：

 div.container { display: flex; flex-direction: column; height: 100%; } div.container div.block { display: flex; justify-content: center; align-items: center; } div.container div.advanced-items { display: flex; flex-direction: column; justify-content: stretch; overflow-y: scroll; height: 100%; } div.container div.advanced-items span { height: 100px; }

 <div class="container"> <div class="block"> <span>some data here</span> </div> <div class="block"> <span>some data here</span> </div> <div style = "--itemCount:3;" class="advanced-items"> <span>1. item</span> <span>2. item</span> <span >3. item</span> <!-- more items here --> </div> </div>