CSS Flexbox：居中的 child 溢出 parent 且位置固定

Question

如何正确地居中 #content 而不会溢出 #container？ margin: auto 有点管用，但对我来说看起来像是 hack，我不想在 CSS Flexbox 中使用任何边距。

请记住 #container 有 position: fixed。

下面是演示问题的代码：[View in JSFiddle ↗]

document.getElementById('content').innerHTML = [...Array(100).keys()].join('<br>')

#container {
  position: fixed;
  background: lightblue;
  top: 0; bottom: 0;
  left: 0; right: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

#content {
  border: 1px solid green;
  /* uncomment the hack below to get desired behavior */
  /* margin: auto */
}

<div id="container">
  <div id="content">
  </div>
</div>

您可以通过取消注释 margin: auto 来检查所需的行为，问题是如何仅使用 flex- 属性而不使用 margin: auto.

来获得相同的结果

Answer 1

你可以将#content的position设置为absolute并在样式中设置top: 0;，这里是有效的plunkr

Answer 2

试试这个。我取了一个 parent div of content id 并把 height:100vh 给了 content_wrap class。

document.getElementById('content').innerHTML = [...Array(100).keys()].join('<br>')

#container {
  position: fixed;
  background: lightblue;
  top: 0; bottom: 0;
  left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

#content {
  border: 1px solid green;
  /* uncomment the hack below to get desired behavior */
  /*margin: auto ;*/
}
.content_wrap  {
  height: 100vh;
}

<div id="container">
  <div class="content_wrap">
    <div id="content">
    </div>
  </div>
</div>

Answer 3

只需将 align-items: center; 替换为 align-items: left; 在您的 css

因为您使用的是 flex，并且 align-items: center; div 从中心部分显示，所以只需将其替换为左侧即可。

document.getElementById('content').innerHTML = [...Array(100).keys()].join('<br>')

#container {
  position: fixed;
  background: lightblue;
  top: 0; bottom: 0;
  left: 0; right: 0;
  display: flex;
  /*align-items: center;*/
  align-items: left;
  justify-content: center;
  overflow: auto;
}

#content {
  border: 1px solid green;
  /* uncomment the hack below to get desired behavior */
  /* margin: auto */
}

<div id="container">
  <div id="content" class="mx-auto">
  </div>
</div>

Answer 4

如果不更改标记，就不能像使用 align-items: center 时那样，如果内容超出 flex 容器，则设计 overflow in both directions。

‘center’
The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.)

还要注意 auto margins 在 Flexbox 中有特殊含义，它不是 hack，恰恰相反，所以在这种情况下，它们是 flex基于解决方案来实现这一点。

更新：这是我后来的回答，展示了更多的解决方案，包括新的 safe 关键字：Flexbox align-items overflow text get cuts off at top

document.getElementById('content').innerHTML = [...Array(100).keys()].join('<br>')

#container {
  position: fixed;
  background: lightblue;
  top: 0; bottom: 0;
  left: 0; right: 0;

  display: flex;
  overflow: auto;
}

#content {
  border: 1px solid green;
  margin: auto;
}

<div id="container">
  <div id="content">
  </div>
</div>

CSS Flexbox：居中的 child 溢出 parent 且位置固定

CSS Flexbox: a centered child overflows a parent with position fixed

css

margin

css-position

overflow

flexbox