html – 为什么Flex容器不会基于嵌套的flex容器子进行增长

2019年7月2日 184次阅读

当我有多个嵌套的flexbox项时,我无法获得父元素来尊重其子元素的实际高度.这就是我的意思：

问题：

《html – 为什么Flex容器不会基于嵌套的flex容器子进行增长》

期望：

当这些单元格中有内容时,它应该挤压没有内容的行,直到达到父元素的最小高度.之后,它应该超过最小高度：

《html – 为什么Flex容器不会基于嵌套的flex容器子进行增长》

当单元格中的内容很少时,行应该占用一定的空间直到最小高度(这已经在工作)：

《html – 为什么Flex容器不会基于嵌套的flex容器子进行增长》

我的标记：

.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解决这个问题？

最佳答案 您已在.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>
点赞