Question

使用overflow hidden代替flexbox时如何实现floats？

我在codepen上的flex示例：using flexbox

我在codepen上的浮动示例，这是我想要的，但使用flexbox：using floats

Answer 1

问题是，当扩展父级时，flexbox会使列等于高度，或者至少最大的列将优先。

因此，我们需要通过有效删除内容来折叠左div ...最简单的方法是position:absolute。

因此我们将内容包装在左侧div中的一个额外元素中并按照提到的方式定位...然后根据需要允许溢出滚动。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Flexbox溢出隐藏

1 个答案: