gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 14:07:41 24 4
gpt4 key购买 nike

<分区>

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

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

尝试调整 View 的高度或添加更多行以查看实际效果。

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>

如何防止它被剪裁?此外,我正在尝试在容器上方和下方留出 30 像素的边距。

谢谢!

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com