假设我在容器中有三个块元素.黑线表示容器.蓝色框是其中的三个块元素.
这三个元素不太合适.如果我设置溢出：隐藏在外部元素上,我会看到前两个元素,部分是第三个元素.
我想要的是,只显示完全适合容器的元素.
这可能与CSS有关吗？
解决方法
是的,可以使用FlexBox,你需要设置flex-direction：column,flex-wrap：wrap和overflow：hidden.
你还需要在flex-childs上设置全宽或计算(100％ – 余量),这样当最后一个元素包装自身时,它将超出父元素并溢出：隐藏在父元素上将负责休息.
* {
Box-sizing: border-Box;
}
.container {
height: 200px;
width: 200px;
border: 1px solid black;
display: flex;
flex-direction: column;
flex-wrap: wrap;
overflow: hidden;
}
.Box {
flex: 0 0 70px;
width: calc(100% - 10px);
margin: 5px;
background: #46A1FF;
}
<div class="container"> <div class="Box"></div> <div class="Box"></div> <div class="Box"></div> </div>
