Flexbox溢出隐藏
Flexbox溢出隐藏
提问于 2016-02-25 10:53:12
当使用flexbox而不是floats时，我如何实现floats？
我在codepen上的flex示例：使用挠曲箱
我在代码页上的浮点示例，这是我想要的，但是使用了flexbox：使用浮标
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-02-25 11:11:21
问题是，柔性盒将使列的高度相等，或者在展开父列时，至少最大的优先。
因此，我们需要通过有效地删除content..and (最简单的方法是position:absolute )来折叠左div。
因此，我们将内容包装在左侧div内的一个额外元素中，并将其定位为mentioned...then允许根据需要滚动溢出。
img {
max-width: 100%;
}
.container {
display: flex;
width: 400px;
border: 5px solid blue;
}
.thumbs {
display: flex;
flex-direction: column;
flex: 1 0 26%;
border: 10px solid green;
position: relative;
overflow-Y: auto;
}
.wrap {
position: absolute;
top: 0;
}
.large {
flex: 1 1 auto;
border: 10px solid red;
}<div class="container">
<div class="thumbs">
<div class="wrap">
<img src="http://lorempixel.com/image_output/food-q-c-700-700-8.jpg">
<img src="http://lorempixel.com/image_output/food-q-c-700-700-5.jpg">
<img src="http://lorempixel.com/image_output/food-q-c-700-700-4.jpg">
<img src="http://lorempixel.com/image_output/food-q-c-700-700-10.jpg">
<img src="http://lorempixel.com/image_output/food-q-c-700-700-10.jpg">
<img src="http://lorempixel.com/image_output/food-q-c-700-700-9.jpg">
</div>
</div>
<div class="large">
<img src="http://lorempixel.com/image_output/food-q-c-700-700-8.jpg">
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35625239
复制相关文章
相似问题
腾讯云开发者
