Question

在flexbox中，如果您设置flex-flow: column nowrap，并且其中的元素具有非零的flex收缩值，则应将其收缩以使其完全适合flex容器内。

我发现，如果您在此容器中只有一件物品，且其内容大于flex容器，则它不会缩小。但是，如果容器中还包含其他元素（如果不是唯一元素），它将缩小。

此CodePen中最佳可视化。

这是来自CodePen的相同代码。

.container {
  padding: 10px;
  height: 100px;
  width: 100px;
  background: red;
  margin: 5px 20px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

.item {
  width: 80px;
  height: 40px;
  background: blue;
  margin: 5px;
  /* same as
  flex: 1 1 40px;
  */
}

.super.item {
  height: 200px;
}

.item div {
  width: 10px;
  height: 150px;
  background: black;
}

body {
  margin: 0;
  display: flex;
}

<div class='container'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'>
  </div>
</div>

<div class='container'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'>
    <div></div>
  </div>
</div>

<div class='container'>
  <div class='item super'>
  </div>
</div>

<div class='container'>
  <div class='item super'>
    <div></div>
  </div>
</div>

请问为什么最后一个div不能缩小以适应flex容器？

Answer 1

如何使这些内容的高度继承其父母的内容？

.super.item {
  height: inherit;
}
.item div {
  width: 10px;
  height: inherit;
  background: black;
}

下面的代码段是您要实现的目标吗？：

.container {
  padding: 10px;
  height: 100px;
  width: 100px;
  background: red;
  margin: 5px 20px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;	
}

.item {
  width: 80px;
  height: 40px;
  background: blue;
  margin: 5px;
  /* same as
  flex: 1 1 40px;
  */
}

.super.item {
  height: inherit;
}

.item div {
  width: 10px;
  height: inherit;
  background: black;
}

body {
  margin: 0;
  display: flex;
}

<div class='container'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'>
  </div>
</div>

<div class='container'>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'></div>
  <div class='item'>
    <div></div>
  </div>
</div>

<div class='container'>
  <div class='item super'>
  </div>
</div>

<div class='container'>
  <div class='item super'>
    <div></div>
  </div>
</div>

Answer 2

我不知道您是否在谈论它。您的div将宽度和高度作为项目。因此，每当您添加另一个div时，都会增加150px的高度。

.item div{
  width: 10px;
  height: 150px;
  background: black;
}

Answer 3

对于Flexbox项目的非常简单的规则：
增长的项目值为 0 ，收缩的值为 1 ，基本情况为自动。
flex: 0 1 auto

所以

.item{
  width: 80px;
  height: 40px;         # will be used as base-case
  background: blue;
  margin: 5px;
  /* same as
  flex: 1 1 40px;
  */
}

为什么 second 容器的项目会收缩？简单。基本情况是40px，或者它没有类别.super。添加.super，然后看看会发生什么。

<div class='container'>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'>            # flex's item height: 40px;
        <div></div>               # regular div
    </div>
</div>

为什么具有类.super的 third 容器会收缩？而height: 200px时应该溢出？简单。它与flex: 0 1 200px相同（这不太正确，请参阅下面的注释，@ TemaniAfif指出了什么）

尝试：

.super.item{
/*   height: 200px; */
  flex: 0 1 200px;            # equal to height: 200px
}

现在尝试这个：

.super.item{
/*   height: 200px; */
  flex: 0 0 200px;            # turn off auto grow / shrink
}

为什么第四溢出？简单。该商品的孩子是普通的div

<div class='container'>
  <div class='item super'>         # flex's item
    <div></div>                    # regular div
  </div>
</div>

并且此div的高度为150px

.item div{
  width: 10px;
  height: 150px;               # remove this one, it shrinks
  background: black;
}

当只有一项时，Flexbox项不会收缩

3 个答案: