CSS Flexbox：居中的子元素溢出位置固定的父元素

Posted 2023-03-06

【中文标题】CSS Flexbox：居中的子元素溢出位置固定的父元素

【英文标题】：CSS Flexbox: a centered child overflows a parent with position fixed

【发布时间】：2018-04-12 06:21:12

【问题描述】：

如何正确居中#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 来实现相同的结果。

【参考方案1】：

如果内容超出弹性容器，则无法更改标记，如使用 align-items: center 时，设计为 overflow in both directions。

‘中心’ flex 项目的边距框位于横轴的中心 线。 （如果     柔性线的交叉尺寸小于 flex 项，它将在两个方向上均等地溢出。）

还要注意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>

【讨论】：

是的，我明白了。感谢@LGSon 提供详细的答案以及规格链接！

【参考方案2】：

试试这个。我已经获取了content id 的一个父 div 并将height:100vh 分配给content_wrap 类。

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>

【讨论】：

谢谢，但额外的包装器不是一个选项。我想保持 HTML 标记原样。

【参考方案3】：

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

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

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>

【讨论】：

在这种情况下，#container 不会按需要居中：jsfiddle.net/9b2br2nz/2

【参考方案4】：

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

【讨论】：

绝对定位大错特错。 Flexbox 是为了摆脱它，把它带回来是个坏主意。