Flexbox和溢出隐藏不正常

Question

所以我有一点HTML:

<div class="flex">
  <div class="red">
    <div class="example">
      <div class="wide">
      </div>
    </div>    
  </div>
  <div class="orange"></div>
  <div class="yellow"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="indigo"></div>
</div>

<div class="flex">
  <div class="red"></div>
  <div class="orange"></div>
  <div class="yellow"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="indigo"></div>
</div>

我的CSS:

.flex {
  display: -webkit-box;
  display: flex;

  height: 100px;
  width: 100%;
}

.flex > div {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;

  -webkit-flex-grow: 1;
  -webkit-flex-shrink: 1;

  margin: 15px;
}

.example {
  overflow: hidden;
  width: 100%;
  border: 1px solid black;
}

.example .wide {
  width: 400px;
}

现在问题是,如果我在一个元素内部有一个div 是一个flexbox而且div有溢出:hidden; 我希望父Flexbox只占用默认的空间量(即与其他元素相同,但它没有.就像它忽略了溢出并且只是扩展了div.

我已经制作了一个codepen,所以你可以看到这个问题:

http://codepen.io/r3plica/pen/dGPmyN?editors=110

我希望所有彩色的div都是相同的宽度.

有人可以帮忙吗？

Answer 1

你的问题是由设置造成flex-basis的.flex > div对auto.这会导致div扩展以适应其内容,因为它沿着flex轴没有设置尺寸.给它一个设定值20px,并且空间将被均分,因为flex-grow设置为1.

本文应该可以帮助您开始使用flex布局.

这是您的代码的修改版本

.flex {
  display: -webkit-box;
  display: flex;

  height: 100px;
  width: 100%;
}

.flex > div {
  flex-grow: 1;
  flex-shrink: 1;
  /* set value for the flex basis, the two properties above will evenly 
  divide the space. */
  flex-basis: 20px;

  -webkit-flex-grow: 1;
  -webkit-flex-shrink: 1;

  margin: 15px;
  overflow: hidden;
}

.example {
  overflow: hidden;
  border: 1px solid black;
}

.example .wide {
  width: 400px;
  height: 10px;
}