我正在尝试使用CSS,HTML构建模式屏幕。代码如下:
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
}
.content {
border-radius: 4px;
background-color: white;
padding: 16px;
height: 80vh;
width: 80vw;
}
.title {
padding: 16px;
}
.body {
padding: 16px;
height: 100%;
width: 100%;
background-color: blue;
min-height: 0;
}
<div class="container">
<div class="content">
<div class="title">The bugged modal screen</div>
<div class="body">
This is overflowing
</div>
</div>
</div>
如示例所示,flex子项(蓝色内容)正在溢出其父项。我试图利用min-height: 0
见解为我工作。帮助将孩子放在其边界内。
将flex
规则添加到container .content
。像这样:
.content {
...
display: flex;
flex-direction: column;
}
此外,删除width: 100%
出来.body
。
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
}
.content {
border-radius: 4px;
background-color: white;
padding: 16px;
height: 80vh;
width: 80vw;
display: flex;
flex-direction: column;
}
.title {
padding: 16px;
}
.body {
padding: 16px;
height: 100%;
/*width: 100%;*/
background-color: blue;
}
<div class="container">
<div class="content">
<div class="title">The bugged modal screen</div>
<div class="body">
This is overflowing
</div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句