css - Flexbox div 在带有滚动条的固定容器中与另一个 div 重叠

Question

我的组件中有以下元素:#bigWrapper，它包含几个元素，#block1 和 #another。

我的任务是在 #block 之间垂直对齐 #another 中的文本(或者在 #block 未显示的情况下的其他顶部元素)和 #bigWrapper 的结尾。此任务运行良好。

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

我在#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 中的包装文本在 <p>与 margin-top: auto; margin-bottom: auto .现在看起来不错。

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>