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

问题描述

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

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

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

body,html {高度:100%；宽度:100%；边距:0；}* {box-sizing: 边框框；}#包装{背景:灰色；高度:100%；宽度:100%；最大高度:100%；显示:弹性；溢出-y:自动；对齐项目:居中；对齐内容:居中；}#盒子 {边距:30px 0;背景:白色；边框:1px 实心 #dfdfdf;}

<div id="盒子">第一行<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>线br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>最后一次

如何防止它被剪掉?此外，我正在尝试在容器上方和下方设置 30 像素的边距.

谢谢！

解决方案

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

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

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

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

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

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

body,html {高度:100%；宽度:100%；边距:0；}* {box-sizing: 边框框；}#包装{背景:灰色；高度:100%；宽度:100%；最大高度:100%；填充:30px 0;显示:弹性；溢出-y:自动；}#盒子 {保证金:自动；背景:白色；边框:1px 实心 #dfdfdf;}

<div id="盒子">第一行<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>线br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>最后一次

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>

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

Thanks!

解决方案

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:

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.

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

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>

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