Flexbox溢出隐藏答案

【问题标题】：Flexbox overflow hiddenFlexbox溢出隐藏
【发布时间】：2016-02-25 19:11:21
【问题描述】：

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

我在 codepen 上的 flex 示例：using flexbox

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

【问题讨论】：

这是一个图片库。拇指在左边，大拇指在右边。显然，左拇指将在以后垂直滚动。
看来你解决了我的问题，谢谢@Paulie_D :)

标签： css overflow flexbox

【解决方案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>

【讨论】：