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

您的问题是由NSObject flex-basis设置为.flex > div引起的。这会导致div扩展以适应其内容，因为它沿着flex轴没有设置尺寸。给它一个像auto这样的设定值，并且空间将被均分，因为20px设置为flex-grow。

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

以下是您的代码的modified version

Answer 2

仅设置父元素的位置

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

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

    </div>
</div>

这对我有用

Flexbox和溢出隐藏不正常

2 个答案: