奇怪的垂直 div flex 行为

Question

我需要创建简单的图像框 js 控件的标记。 它应该具有主图像容器以及缩略图图像区域。最后一个应该位于主图像区域的顶部、底部、右侧或左侧。

我几乎用“flex”方法完成了标记。 当缩略图区域是水平的（位于顶部或底部）时效果很好：

http://jsfiddle.net/z9rq73ub/

但对于垂直缩略图区域（主图像左侧或右侧）的情况，它会失败：“thumbs-container”div 溢出，而我希望“thumbs”div 溢出。这是我的测试标记：

<div class="frame" style="height: 250px; width: 250px; border: 1px solid black;">
<div class="image" style="background:red; margin:5px;"></div>
<div class="thumbs-container" style="margin:5px;">
    <div class="back" style="background:orange"></div>
    <div class="thumbs" style="background:blue;">
       <div class="thumb" style="background:green; margin:3px;"></div>
       <div class="thumb" style="background:green; margin:3px;"></div>
       <div class="thumb" style="background:green; margin:3px;"></div>
       <div class="thumb" style="background:green; margin:3px;"></div>
       <div class="thumb" style="background:green; margin:3px;"></div>
       <div class="thumb" style="background:green; margin:3px;"></div>
       <div class="thumb" style="background:green; margin:3px;"></div>
       <div class="thumb" style="background:green; margin:3px;"></div>
   </div>
   <div class="forth" style="background:orange"></div>
</div>

.frame {
  display: flex;
  flex-flow: row;
}

.image {
  flex: 1 0 auto;
  order: 0;
}

.thumbs-container {
  flex: 0 0 40px;
  display: flex;
  flex-flow: column;
  order: 1;
}

.back{
  flex: 0 0 30px; 
}

.forth{
  flex: 0 0 30px; 
}

.thumbs {
  flex: 1 0 auto;
  display: flex;
  flex-flow: column;
  justify-content: center;
  overflow: hidden;
}

.thumb {
  flex: 0 0 30px;
}

请看 http://jsfiddle.net/d6ddL6jn/12/

Answer 1

代替

.thumbs { flex: 1 0 auto; }

使用

.thumbs { flex: 1; }

即，将flex-basis 设置为0。

.frame {
  display: flex;
  flex-flow: row; /* row,column */
}
.image {
  flex: 1 0 auto;
  order: 0; /* 1 */
}
.thumbs-container {
  flex: 0 0 40px;
  display: flex;
  flex-flow: column; /* row,column */
  order: 1; /* 0 */
}
.back {
  flex: 0 0 30px;
}
.forth {
  flex: 0 0 30px;
}
.thumbs {
  flex: 1;
  display: flex;
  flex-flow: column; /* row,column */
  overflow: hidden;
}
.thumb {
  flex: 0 0 30px;
}

<div class="frame" style="height: 250px; width: 250px; border: 1px solid black;">
  <div class="image" style="background:red; margin:5px;"></div>
  <div class="thumbs-container" style="margin:5px;">
    <div class="back" style="background:orange"></div>
    <div class="thumbs" style="background:blue;">
      <div class="thumb" style="background:green; margin:3px;"></div>
      <div class="thumb" style="background:green; margin:3px;"></div>
      <div class="thumb" style="background:green; margin:3px;"></div>
      <div class="thumb" style="background:green; margin:3px;"></div>
      <div class="thumb" style="background:green; margin:3px;"></div>
      <div class="thumb" style="background:green; margin:3px;"></div>
      <div class="thumb" style="background:green; margin:3px;"></div>
      <div class="thumb" style="background:green; margin:3px;"></div>
    </div>
    <div class="forth" style="background:orange"></div>
  </div>
</div>