Question

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

我的任务是在#another（如果未显示#another时，其他顶部元素）和#block末尾之间的#block中垂直对齐文本。这项工作正常。

其他不起作用的任务是：如果#bigWrapper和#block1的内容太多，则它们显示通用的滚动条。

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

#another

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;
}

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

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

Answer 1

您可以先将position: relative和overflow: auto添加到#bigWrapper。这样，您可以引用（相对于绝对next ）并设置滚动。

然后使用overflow: auto，position: absolute并用top: 0和left: 0将其定位到#wrapper。它将创建您想要的行为。

id的CSS都是这样的：

#bigWrapper {
  width: 500px;
  height: 150px;
  display: flex;
  flex: 1;
  flex-direction: column;
  position: relative;
  overflow: auto;  
}
#wrapper {
  display: flex;
  align-items: stretch;
  flex-flow: column nowrap;
  flex-grow: 1;
  overflow: auto;
  position: absolute;
  top: 0;
  left: 0;
}

然后您应该修复的是p和"Some other text"。您可以将其作为#wrapper中的第一个孩子向下移动。

希望有帮助。

Answer 2

我用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>

Flexbox div与固定容器中的另一个重叠滚动

2 个答案: