flex容器内居中的元素正在增长并溢出到顶部 [英] Centered elements inside a flex container are growing and overflowing beyond top

问题描述

我必须忘了垂直和水平居中的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.

您可能还会注意到水平方向可能会发生这种情况，这就是为什么我将使用margin在两个方向上居中的原因.

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>

这篇关于flex容器内居中的元素正在增长并溢出到顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！