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

2022-01-30 00:00:00 html css flexbox

我肯定忘记了我的垂直和水平居中 flexbox 的一些基本内容.

I must be forgetting something fundamental with my vertically and horizontally centered flexbox.

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

The container is within a parent with vertical scroll, and when the container becomes too tall, it grows beyond the parent top, clipping the content. The bottom stays put.

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

Try adjusting the height of the view or adding more lines to see it in action.

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>

如何防止它被剪掉?此外，我试图在容器上方和下方留出 30px 的边距.

How do I keep it from getting clipped? Additionally I'm trying to have a 30px margin above and below the container.

谢谢！

推荐答案

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

You forgot nothing but you simply need to understand what is happening. First you made your wrapper to be 100% height of screen and then you made the box to be centred vertically and horizontally. When the box has a big height you will have something like this:

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

Now, when you add overflow-y: auto you will create a scroll that will start from the top of the wrapper until the bottom overflowed content. So it will be like this:

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

That's why you are able to scroll to the bottom to see the bottom part and not able to see the top part.

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

To avoid this, use margin:auto to center your element and in this case we will have two situations:

  1. 当 box-height <时wrapper-height 由于 margin:auto 我们将在每一侧都有空间平均分布，因此您的元素将居中像预期的那样.
  2. 当 box-height > 时wrapper-height 我们将有正常的行为，您的元素将溢出并且他的顶部边缘将粘在包装器的顶部边缘.
  1. When box-height < wrapper-height we will have the space spread equally on each side because of the margin:auto thus your element will be centred like expected.
  2. When box-height > wrapper-height we will have the normal behavior and your element will overflow and his top edge will stick to the top edge of the wrapper.

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

You may also notice the same can happen horizontally that's why I will use margin to center on both directions.

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>

相关文章