为什么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

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;