CSS - 弹性框高度 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的剩余高度确切地说，看看它是如何发生的，只需将border添加到div.advanced-items中，看看它包裹的空间有多大

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%来使它们平均共享其父级的高度

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>