flex容器内的居中元素正在增长并溢出顶部[重复]

Posted 2023-03-05

【中文标题】flex容器内的居中元素正在增长并溢出顶部[重复]

【英文标题】：Centered elements inside a flex container are growing and overflowing beyond top [duplicate]

【发布时间】：2021-12-28 10:15:57

【问题描述】：

我一定是忘记了垂直和水平居中的弹性框的一些基本内容。

容器在垂直滚动的父级内，当容器变得太高时，它会超出父级顶部，从而剪裁内容。底部保持不变。

尝试调整视图的高度或添加更多行以查看它的实际效果。

body,
html 
  height: 100%;
  width: 100%;
  margin: 0;


* 
  box-sizing: border-box;


#wrapper 
  background: grey;
  height: 100%;
  width: 100%;
  max-height: 100%;
  display: flex;
  overflow-y: auto;
  align-items: center;
  justify-content: center;


#box 
  margin: 30px 0;
  background: white;
  border: 1px solid #dfdfdf;

<div id="wrapper">
  <div id="box">
    First line
    <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br> Last linje
  </div>
</div>

如何防止它被剪掉？此外，我试图在容器上方和下方留出 30 像素的边距。

谢谢！

【参考方案1】：

我认为您在扩展容器高度的盒子类中设置了上边距。您可以将其设置为填充而不是边距。希望这可以帮助。谢谢。

【讨论】：

谢谢，但这不会改变行为。

【参考方案2】：

我认为你想要的是让你的弹性项目 (#box) 有一个高度并将其设置为溢出，而不是弹性容器。另外，要在上方和下方添加 30px，我会从框中删除边距，而是向容器添加填充。

因此，更新后的样式如下所示：

#wrapper 
  background: grey;
  height: 100%;
  width: 100%;
  max-height: 100%;
  display: flex;      
  align-items: center;
  justify-content: center;
  padding: 30px 0; /*added*/


#box 
  background: white;
  border: 1px solid #dfdfdf;
  overflow-y: auto; /*added*/
  height: 100%; /*added*/

body,
html 
  height: 100%;
  width: 100%;
  margin: 0;


* 
  box-sizing: border-box;


#wrapper 
  background: grey;
  height: 100%;
  width: 100%;
  max-height: 100%;
  display: flex;      
  align-items: center;
  justify-content: center;
  padding: 30px 0;


#box     
  background: white;
  border: 1px solid #dfdfdf;
  overflow-y: auto;
  height: 100%;

<div id="wrapper">
  <div id="box">
    First line
    <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br> Last linje
  </div>
</div>

【讨论】：

谢谢。不幸的是，我不希望盒子滚动，而是周围的包装。

【参考方案3】：

您什么都没忘记，但您只需要了解正在发生的事情。首先，您将包装器设置为 100% 的屏幕高度，然后将框设置为垂直和水平居中。当盒子的高度很大时，你会得到这样的东西：

现在，当您添加overflow-y: auto 时，您将创建一个从包装器顶部 开始直到底部溢出内容的滚动。所以它会是这样的：

这就是为什么您可以滚动到底部以查看底部而无法看到顶部的原因。

为避免这种情况，请使用margin:auto 将元素居中，在这种情况下，我们将有两种情况：

当box-height < wrapper-height 时，由于margin:auto，我们将在每一侧都有空间平均分布，因此您的元素将像预期的那样居中。 当box-height > wrapper-height 时，我们将有正常行为，您的元素将溢出，并且他的顶部边缘将粘在包装器的顶部边缘。

您可能还注意到水平方向也会发生同样的情况，这就是为什么我将使用边距在两个方向上居中。

body,
html 
  height: 100%;
  width: 100%;
  margin: 0;


* 
  box-sizing: border-box;


#wrapper 
  background: grey;
  height: 100%;
  width: 100%;
  max-height: 100%;
  padding:30px 0;
  display: flex;
  overflow-y: auto;


#box 
  margin: auto;
  background: white;
  border: 1px solid #dfdfdf;

<div id="wrapper">
  <div id="box">
    First line
    <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br> Last linje
  </div>
</div>

【讨论】：

哇 - 我永远不会想出那个解决方案。尽管您的出色解释有所帮助，但我不确定为什么 margin: auto 可以解决此问题。您可以提供任何其他解释吗？感谢您的帮助。

@Jeppebm margin:auto 是 flex 的魔力之一；) 当您设置 auto 时，意味着将边距在每一侧分割为相等，从而使元素居中......非常像 margin:auto 与一个具有固定宽度的块元素......当高度更大时没有边距，所以它是无用的，你有正常的行为