Flexbox和溢出：隐藏无法正常工作 [英] Flexbox and overflow: hidden not working properly

问题描述

我有一些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 具有溢出：隐藏； 我希望父级flexbox仅占用默认的空间量（即与其他元素相同，但不是）。

Now, the problem here is, if I have a div inside an element that is a flexbox and that div has overflow: hidden; I would expect the parent flexbox to just take up the default amount of space (i.e. the same as the other elements, but it doesn't.

这就像忽略了溢出，只是扩展了 div 。

It is like it ignores the overflow and just expands the div anyway.

我已经制作了 CodePen ，因此您可以看到

I have made a CodePen so you can see the issue.

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

I would like all the coloured divs to be the same width.

任何人都可以帮忙吗？

推荐答案

您的问题是由设置 flex-basis 从 .flex÷ div 到 auto 。这导致div扩展以容纳其内容，因为它在伸缩轴上没有固定的尺寸。值，例如 20px ，由于 flex-grow 设置为 1，因此空间将被平均分配。

Your problem is caused by setting the flex-basis of .flex > div to auto. This causes the div to expand to accommodate its content as it has no set dimension along the flex axis. Give it a set value like 20px and the space will be evenly divided because flex-grow is set to 1.

本文应该可以帮助您开始使用Flex布局。

This article should help you get started with the flex layout.

这里是代码的修改版本

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

这篇关于Flexbox和溢出：隐藏无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！