防止第一个 Flexbox 子项影响第二个 Flexbox 子项的高度

Question

目前，我正在开发一个项目，该项目似乎需要在 HTML/CSS 端使用大量嵌套的 Flexbox。到目前为止，我已经使用了 one Flexbox 父级和一组嵌套的 Flexbox 子级（子级 only 包含具有固定高度的节点）。结果是，如果您

flex-wrap: wrap

父级 Flexbox，则整个系统（即父级）的高度将由嵌套的子级决定。使用此示例代码：

.parent {
  width: 60px;
  background-color: gray;
  display: flex;
  flex-wrap: wrap;
}

.child {
  display: flex;
  flex-direction: column;
  margin: 5px;
  background-color: pink;
}

.childcontent {
  flex: 0 0 20px;
  width: 20px;
}

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

你得到这个结果：

假设我想再添加一个

<div class="child"></div>

元素作为父元素的子元素，父元素 Flexbox 会将其包装到新行上。同样，这个新子元素的大小由

.childcontent

决定（在我的项目中实际上是几个元素，每个元素都有绝对固定的

flex-basis

，但每个元素都会发生变化或彼此不同）。但我们看到父母的总身高完全由孩子的身高决定。它恰好是每行的最大高度加上每行最大边距的

top

和

bottom

的总和。子级保持其内容的

flex

属性指定的高度，并且它们确定父级的高度，反之亦然：

现在我的项目变得更加复杂。在

.parent

的左侧，我现在需要添加一个固定高度和固定宽度的元素。为了将其保留在

.parent

的左侧，我能想到的唯一方法是使用包装弹性盒来指定这些元素属于一行。假设我希望这个新的固定大小元素

.sibling

高 100 像素，宽 20 像素。然后我将代码更新为以下内容：

.wrapper {
  width: 160px;
  background-color: red;
  display: flex;
}

.sibling {
  background-color: aquamarine;
  flex: 0 0 20px;
  height: 100px;
}

.parent {
  width: 60px;
  background-color: gray;
  display: flex;
  flex-wrap: wrap;
}

.child {
  display: flex;
  flex-direction: column;
  margin: 5px;
  background-color: pink;
}

.childcontent {
  flex: 0 0 20px;
  width: 20px;
}

<div class="wrapper">
  <div class="sibling"></div>
  <div class="parent">
    <div class="child"> <div class="childcontent"></div> </div>
    <div class="child"> <div class="childcontent"></div> </div>
    <div class="child"> <div class="childcontent"></div> </div>
  </div>
</div>

理想情况下，结果将类似于以下两个之一：

或

相反，它看起来像这样。

.parent

弹性盒已被拉伸以匹配其同级的 100px 高度，所有

.child

元素也是如此：

这本身就很好，但尽管事实上

.childcontent

将其

flex-basis

的最大尺寸限制为

20px

，但每个

40px

项目它都会拉伸到

.child

高。我希望每个

.child

项目保留之前的高度，由

.childcontent

确定。相反，它会在最后（在本例中是唯一）内容之外延伸出无意义的额外

20px

。这里的主要问题是我想这样做没有任何形式的绝对定位或高度改变。正如我所提到的，在我的实际代码中，

.childcontent

表示一组几个可能的元素。我希望能够直接单独更改这些元素的属性，并使其反映在

.child

的高度中，而无需更改 .child

 的大小或其他元素中的任何其他额外绝对定位。

只要我的代码看起来像我发布的那些“理想”照片之一，并且在

.childcontent

 的任何祖先中都没有使用绝对定位 - 我可以对此进行任何修复。例如，即使该修复涉及 

not 在 display: flex

 中使用 

.wrapper

 。

Answer 1

只需将

align-items: start

 添加到包装纸中即可。

.wrapper {
  width: 160px;
  background-color: red;
  display: flex;
  align-items: start;
}

.sibling {
  background-color: aquamarine;
  flex: 0 0 20px;
  height: 100px;
}

.parent {
  width: 60px;
  background-color: gray;
  display: flex;
  flex-wrap: wrap;
}

.child {
  display: flex;
  flex-direction: column;
  margin: 5px;
  background-color: pink;
}

.childcontent {
  flex: 0 0 20px;
  width: 20px;
}

<div class="wrapper">
  <div class="sibling"></div>
  <div class="parent">
    <div class="child">
      <div class="childcontent"></div>
    </div>
    <div class="child">
      <div class="childcontent"></div>
    </div>
    <div class="child">
      <div class="childcontent"></div>
    </div>
  </div>
</div>