弹性盒子和溢出隐藏不正常工作

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>

现在的问题是，如果我有一个元素（即带有粗黑轮廓的.example）内部有一个

并且该

具有overflow: hidden;属性，那么我会期望父flexbox仅占用默认空间量（即与其他元素相同），但实际上并不是这样。

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

一样。

我做了一个CodePen，以便您可以看到问题。

我希望所有着色的

都具有相同的宽度。

有人能帮忙吗？

- r3plica

---

只需在具有溢出容器的 flex 子元素中添加 min-height: 0; 即可解决溢出问题。 - Time Killer

Answer 1

你的问题是因为将.flex > div的flex-basis设置为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;
}

- Huba Nagy

Answer 2

仅设置父元素的位置

<style>
.parent{
    display:flex;
    overflow:hidden;
    position:relative;
}
.child{
    flex-grow:2
}
</style>

<div class="parent">
    <div class="child">

    </div>
</div>

这对我有效。

- mohammad feiz