Flex 框问题 - 溢出时中心元素被截断 [重复]

Posted 2023-03-29

【中文标题】Flex 框问题 - 溢出时中心元素被截断 [重复]

【英文标题】：Flex box issue - Center Element truncated on overflow [duplicate]

【发布时间】：2019-02-08 18:28:27

【问题描述】：

我正在使用一些弹性框属性将一个简单的 div 放置到屏幕的中心：

//CSS

html 
    width: 100%;
    height: 100%;


body 
    width: 100%;
    height: 100%;
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;


div 
    height: 500px;
    width: 500px;
    background-color: red;
    border: 5px solid black;


//HTML

<div></div>

它工作得很好，但是当我将屏幕高度减小到小于 div 的尺寸（小于 500 像素）时，我会得到一个奇怪的截断：我可以向下滚动并看到底部边框，但由于某种原因，当我向上滚动我无法到达顶部边框，它被隐藏了。

我错过了什么吗？任何人都知道如何解决这个问题？ 我创建了一个 codepen 来演示这个问题：https://codepen.io/stepinsight/full/MqmEME

非常感谢您的帮助！

【问题讨论】：

你在另一个类/元素上有一个属性，上面写着：溢出：隐藏

不，只是上面的代码；）

不是 100% 肯定，但可能与您的 justify-content 标签有关

嗨，试试html, bodymin-height:100%; 而不是html, bodyheight:100%;

天哪！惊人的 ！它工作完美，感谢一百万！

【参考方案1】：

您可以在 flex 子项上使用 margin:auto 代替 align-items:center; 将其居中：

html 
	width: 100%;
	height: 100%;


body 
	width: 100%;
	height: 100%;
	margin: 0px;
	display: flex; 
	justify-content: center;


div 
	height: 500px;
	width: 500px;
	background-color: red;
	border: 5px solid black;
	margin:auto;

<div></div>

fork of your pen 注意： justify-content 也会在 codepen 上被删除，当 margin:auto; 的 flex 子代适用于两个轴时。还添加了flex-shrink:0;，因此容器不会水平收缩（并且还隐藏左边框），同时屏幕的宽度也会变小。

【讨论】：

感谢您的帮助，完美运行！不敢相信我不知道边距：自动为两个轴工作：D 你成就了我的一天！