如何避免在flex列中发生水平溢出?例如,我有以下标记:
.container {
display: flex;
}
.left, .right {
height: 300px;
}
.left {
flex: 0 0 300px;
background-color: pink;
}
.right {
flex: 1 0;
background-color: lightblue;
}
.inner-container{
padding-left: 16px;
padding-right: 16px;
width: 100%;
/*for testing purpose*/
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
<div class="container">
<div class="left"></div>
<div class="right">
<div class="inner-container">
Inner container
</div>
</div>
</div>
正如你所看到的,在flex容器中有两个项目:左边的一个是300px宽的,右边的一个占据了容器内的所有剩余空间。如果我要在右flex列中添加另一个全宽容器,它会导致水平溢出。如何防止这种行为?谢谢。
发布于 2018-06-30 07:30:22
将添加到.inner-container
。
.container {
display: flex;
}
.left,
.right {
height: 300px;
}
.left {
flex: 0 0 300px;
background-color: pink;
}
.right {
flex: 1 0;
background-color: lightblue;
}
.inner-container {
padding-left: 16px;
padding-right: 16px;
width: 100%;
/*for testing purpose*/
display: flex;
justify-content: center;
align-items: center;
height: 100%;
box-sizing: border-box; /* NEW */
}
<div class="container">
<div class="left"></div>
<div class="right">
<div class="inner-container">
Inner container
</div>
</div>
</div>
https://stackoverflow.com/questions/51110490
复制相似问题