关于弹性盒布局 设置某元素 flex： 1后，某元素子元素 height ： 100% 是失效的问题

Posted 2021-09-03 游离的多态

<div class="box">
   <div class="boxa"></div>
   <div class="boxb">
      <div class="son"><div/>
   </div>
</div>

.box {
  display: flex;
  width: 100%;
}

.boxa {
  width: 100px;
}

.boxb {
  flex: 1
}

.son{
  width: 100%
}

这样的情况， son元素的100% 并不会生效 可以添加一个 height： 0；

.boxb {
  height: 0;
  flex: 1
}

就可以了