css - Flexbox 和溢出 : hidden not working properly

Question

我有一点 HTML:

.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%;
      outline: 5px solid black;
    }
      .example .wide {
        width: 400px;
      }

.red    { background-color: red; }
.orange { background-color: orange; }
.yellow { background-color: yellow; }
.green  { background-color: green; }
.blue   { background-color: blue; }
.indigo { background-color: indigo; }

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

现在，这里的问题是，如果我有一个 div inside 元素是一个 flexbox 并且 div 有 overflow: hidden; (即 .example，带有粗黑轮廓)我希望父 flexbox 只占用默认空间量(即与其他元素相同，但事实并非如此。

就好像它忽略了 overflow 而只是扩展了 div。

我做了一个CodePen这样您就可以看到问题。

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

有人能帮忙吗？

Answer 1

您的问题是由于将 .flex > div 的 flex-basis 设置为 auto 引起的。这会导致 div 扩展以容纳其内容，因为它没有沿 flex 轴设置的尺寸。给它一个设置值，例如 20px，空间将被平均分配，因为 flex-grow 设置为 1。

This article应该可以帮助您开始使用 flex 布局。

这是一个modified version你的代码

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