弹性框 div 在带有滚动的固定容器中重叠另一个

Question

我的组件中有以下元素：#bigWrapper，其中包含多个元素，#block1和#another。

我的任务是在#block(或其他顶部元素，如果未显示#block)和#bigWrapper末尾之间垂直对齐文本#another。此任务工作正常。

其他不起作用的任务是：如果#block1和#another的内容太多，请为它们显示公共滚动条。

我用#wrapper包装了#block1和#another，但实际上#another内容#block重叠。 当我从#another中删除justify-content: center;属性时，它可以正常工作，但在这种情况下，不满足第一个要求。

html, body {
height: 100%;
margin: 0;
}
p {
margin: 0;
padding: 0;
}
#bigWrapper {
width: 500px;
height: 150px;
display: flex;
flex: 1;
flex-direction: column;
}
#wrapper {
display: flex;
align-items: stretch;
flex-flow: column nowrap;
flex-grow: 1;
overflow: auto;
}
#block1 {
flex: 0;
}
#another {
flex: 1 0;
justify-content: center;
display: flex;
flex-direction: column;
}

<div id="bigWrapper">
<p>Some other text</p>
<div id="wrapper">
<div id="block1">Block Block Block Block Block Block Block Block Block Block B lock Block Block Block Block Block
Block Block Block Block Block Block Block Block Block B lock Block Block Block Block Block Block Block Block Block
Block Block Block Block Block B lock
Block Block Block Block Block Block Block Block Block Block Block Block Block Block B lock Block Block Block Block
Block Block Block Block Block Block Block Block Block Block B lock Block Block Block Block
</div>
<div id="another">Another Another Another Another Another Another Another Another Another Another Another Another
Another Another Another Another Another Another Another Another Another Another Another Another Another Another
Another Another Another Another Another
Another Another Another Another Another
</div>
</div>
</div>

https://jsbin.com/fomiwip/1/edit?html,output

请帮帮我 - 如何避免这种重叠？

Answer 1

我已经删除了justify-content: center，#another中的包装文本与margin-top: auto; margin-bottom: auto<p>。现在看起来不错。

html, body {
height: 100%;
margin: 0;
}
p {
margin: 0;
padding: 0;
}
#bigWrapper {
width: 500px;
height: 150px;
display: flex;
flex: 1;
flex-direction: column;
}
#wrapper {
display: flex;
align-items: stretch;
flex-flow: column nowrap;
flex-grow: 1;
overflow: auto;
}
#block1 {
flex: 0;
}
#another {
flex: 1 0;
display: flex;
flex-direction: column;
}
#another p {
margin-top: auto;
margin-bottom: auto;
}

<div id="bigWrapper">
<p>Some other text</p>
<div id="wrapper">
<div id="block1">Block Block Block Block Block Block Block Block Block Block B lock Block Block Block Block Block
Block Block Block Block Block Block Block Block Block B lock Block Block Block Block Block Block Block Block Block
Block Block Block Block Block B lock
Block Block Block Block Block Block Block Block Block Block Block Block Block Block B lock Block Block Block Block
Block Block Block Block Block Block Block Block Block Block B lock Block Block Block Block
</div>
<div id="another"><p>Another Another Another Another Another Another Another Another Another Another Another Another
Another Another Another Another Another Another Another Another Another Another Another Another Another Another
Another Another Another Another Another
Another Another Another Another Another</p>
</div>
</div>
</div>