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

我一定是忘记了垂直和水平居中flexbox的一些基本功能

容器位于具有垂直滚动的父容器内，当容器变得太高时，它会超出父容器顶部，从而剪切内容。底部保持不变

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

body，
html{
身高：100%；
宽度：100%；
保证金：0；
}
* {
框大小：边框框；
}
#包装纸{
背景：灰色；
身高：100%；
宽度：100%；
最大高度：100%；
显示器：flex；
溢出y：自动；
对齐项目：居中；
证明内容：中心；
}
#盒子{
利润率：30px0；
背景：白色；
边框：1px实心#dfdfdf；
}

一线

线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
最后一行

我认为您在box类中设置了扩展容器高度的顶部边距。您可以将其设置为padding而不是margin。希望这有帮助。谢谢

我认为您在box类中设置了扩展容器高度的顶部边距。您可以将其设置为padding而不是margin。希望这有帮助。谢谢

我认为您想要的是使您的flex项目（

#box

）具有高度，并将其设置为溢出，而不是flex容器。另外，要在上面和下面添加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{
身高：100%；
宽度：100%；
保证金：0；
}
* {
框大小：边框框；
}
#包装纸{
背景：灰色；
身高：100%；
宽度：100%；
最大高度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
填充：30px0；
}
#框{
背景：白色；
边框：1px实心#dfdfdf；
溢出y：自动；
身高：100%；
}

一线

线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
最后一行

我认为您想要的是使您的flex项目（

#box

）具有一定的高度，并将其设置为溢出，而不是flex容器。另外，要在上面和下面添加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{
身高：100%；
宽度：100%；
保证金：0；
}
* {
框大小：边框框；
}
#包装纸{
背景：灰色；
身高：100%；
宽度：100%；
最大高度：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
填充：30px0；
}
#框{
背景：白色；
边框：1px实心#dfdfdf；
溢出y：自动；
身高：100%；
}

一线

线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
最后一行

您什么也没忘，只是需要了解发生了什么。首先你把包装纸做成屏幕的100%高度，然后把盒子垂直和水平居中。当盒子有很大的高度时，你会有这样的东西：

#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*/
}

现在，当您添加

overflow-y:auto

时，您将创建一个滚动条，该滚动条将从包装的顶部开始，直到底部溢出的内容。所以它将是这样的：

#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*/
}

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

为了避免这种情况，请使用

margin:auto

将元素居中，在这种情况下，我们将有两种情况：

当

box height

时，由于

margin:auto

的缘故，我们将使空间均匀分布在每一侧，因此您的元素将居中

当

box height>wrapper height

时，我们将有正常的行为，您的元素将溢出，并且其顶边将粘附到wrapper的顶边

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

body，
html{
身高：100%；
宽度：100%；
保证金：0；
}
* {
框大小：边框框；
}
#包装纸{
背景：灰色；
身高：100%；
宽度：100%；
最大高度：100%；
填充：30px0；
显示器：flex；
溢出y：自动；
}
#盒子{
保证金：自动；
背景：白色；
边框：1px实心#dfdfdf；
}

一线

线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
线条
最后一行

您什么也没忘，只是需要了解发生了什么。首先你把包装纸做成屏幕的100%高度，然后把盒子垂直和水平居中。当盒子有很大的高度时，你会有这样的东西：

#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*/
}

现在，当您添加

overflow-y:auto

时，您将创建一个滚动条，该滚动条将从包装的顶部开始，直到底部溢出的内容。所以它将是这样的：

#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*/
}

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

为了避免这种情况，请使用

margin:auto

将元素居中，在这种情况下，我们将有两种情况：

当

box height

时，由于

margin:auto

的缘故，我们将使空间均匀分布在每一侧，因此您的元素将居中lik