Flexbox 和溢出：隐藏无法正常工作答案

【问题标题】：Flexbox and overflow: hidden not working properlyFlexbox 和溢出：隐藏无法正常工作
【发布时间】：2016-03-13 06:46:28
【问题描述】：

我有一点 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 inside 一个元素是 flexbox 并且 div 有 overflow: hidden; 我希望父 flexbox 只占用默认的空间量（即与其他元素相同，但不是。

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

我已创建CodePen，以便您查看问题。

我希望所有有颜色的divs 宽度相同。

谁能帮忙？

【问题讨论】：

抱歉，Flexbox not giving equal width to elements 的问题与flexbox and overflow hidden not working properly 的重复问题是什么关系？其中一个标题是错的吗？哪一个？我来这里是为了回答为什么overflow:hidden 不能在我的 flex 布局上工作，但现在我必须去阅读一些关于元素宽度的问题？这到底是怎么回事？ SO 的节制真的很疯狂！
是的。这个社区不是要帮助人们和他们的具体案例。对于某些人来说，这就像那个游戏“记忆”，他们曾经看到另一个具有相同答案的问题并标记它——即使它对你没有帮助，而且他们没有提供任何上下文和帮助。搞砸了我不再问问题了，因为我不喜欢这些人。

标签： css flexbox

【解决方案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;
}

【讨论】：

【解决方案2】：

只设置父元素的位置

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

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

    </div>
</div>

这对我有用

【讨论】：