隐藏 Flexbox 溢出

Question

当使用 flexbox 而不是 floats 时，如何实现 overflow hidden？

我在 codepen 上的 flex 示例：using flexbox

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

Answer 1

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

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

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

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>

隐藏 Flexbox 溢出

Flexbox overflow hidden

css

overflow

flexbox