如何删除继承父高度的弹性项目

Question

我有以下布局：

.content-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.view-content {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.zavod,
.ekipa {
  width: 100%;
  max-width: 300px;
  background-color: red;
}

<div class="content-container">
  <div class="view-content">
    <section class="zavod">
      <p>Some text</p>
    </section>
    <section class="ekipa">
      <p>Some more text</p>
      <p>Even more text</p>
      <p>Even more text</p>
    </section>
  </div>  
</div>

我想完成的是为了.zavod和.ekipa拥有不同的高度。现在这在单个 flex 容器中有效，但是当我嵌套多个时它不起作用。

我究竟做错了什么？

Answer 1

将align-items属性设置为flex-start在您的.view-content容器上。align-items默认为stretch，这就是为什么.zavod和.ekipa, 作为 flex 子项被“拉伸”以匹配彼此的高度的原因：

.content-container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.view-content {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
}

.zavod,
.ekipa {
  width: 100%;
  max-width: 300px;
  background-color: red;
}

<div class="content-container">
  <div class="view-content">
    <section class="zavod">
      <p>Some text</p>
    </section>
    <section class="ekipa">
      <p>Some more text</p>
      <p>Even more text</p>
      <p>Even more text</p>
    </section>
  </div>  
</div>

这是一个关于如何使用 flexbox的可爱指南，我不时参考它。