html - 为什么 flex 容器不基于嵌套的 flex 容器子容器增长

Question

当我有多个嵌套的 flexbox 元素时，我无法让父元素遵守其子元素的实际高度。这就是我的意思:

问题:

期望:

当这些单元格中有内容时，它应该压缩没有内容的行，直到达到父元素的最小高度。之后，它应该超过最小高度:

当单元格中的内容很少时，行应该占用均匀的空间直到最小高度(这已经有效):

我的标记:

.weeks {
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
  width: 400px;
  min-height: 200px;
}

.week {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
}

.days {
  flex: 1;
  display: flex;
  background-color: lightblue;
}

.day {
  border: 1px solid black;
  flex: 1;
}

<div class="weeks">
  <div class="week">
    <div class="days">
      <div class="day">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum consequatur beatae animi porro cumque, tempora delectus voluptates repellat vitae.
      </div>
      <div class="day">1</div>
      <div class="day">1</div>
    </div>
  </div>
  <div class="week">
    <div class="days">
      <div class="day">1</div>
      <div class="day">1</div>
      <div class="day">1</div>
    </div>
  </div>
  <div class="week">
    <div class="days">
      <div class="day">1</div>
      <div class="day">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum consequatur beatae animi porro cumque, tempora delectus voluptates repellat vitae.
      </div>
      <div class="day">1</div>
    </div>
  </div>
</div>

如何使用 flexbox 解决这个问题？

Answer 1

您已在 .week 将 flex-basis 属性设置为 0。保持不变，问题就会消失。如果您希望 .week 元素具有最小高度，请在 .week 选择器上设置该属性。

.weeks {
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
  width: 400px;
  min-height: 200px;
}

.week {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.days {
  flex: 1;
  display: flex;
  background-color: lightblue;
}

.day {
  border: 1px solid black;
  flex: 1;
}

<div class="weeks">
  <div class="week">
    <div class="days">
      <div class="day">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum consequatur beatae animi porro cumque, tempora delectus voluptates repellat vitae.
      </div>
      <div class="day">1</div>
      <div class="day">1</div>
    </div>
  </div>
  <div class="week">
    <div class="days">
      <div class="day">1</div>
      <div class="day">1</div>
      <div class="day">1</div>
    </div>
  </div>
  <div class="week">
    <div class="days">
      <div class="day">1</div>
      <div class="day">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum consequatur beatae animi porro cumque, tempora delectus voluptates repellat vitae.
      </div>
      <div class="day">1</div>
    </div>
  </div>
</div>