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

当我有多个嵌套的 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 解决这个问题？

最佳答案

您已将 flex-basis 属性设置为 0 上的 .week 。不设置它，问题就会消失。如果您希望 .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>

关于html - 为什么 flex 容器不会基于嵌套的 flex 容器子项增长，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42988508/