请教几个flex的问题

Question

*{
  padding: 0;
  margin: 0;
}
.box{
  display: flex;
  flex-direction: column;
  height: 600px;
}
.b-header{
  height: 100px;
  background: #4169E1;
}
.b-container{
  flex: 0 1 auto;
  overflow-y: auto;
  background: #76D5FF;
}

<div class="box">
  <div class="b-header">
    b-header
    <!-- <p style="height: 200px;">inner-header</p> -->
  </div>
  <div class="b-container">
    b-container
    <p style="height: 2000px;">inner-container</p>
  </div>
</div>

1. 在设置了display:flex的盒子里，子元素如果没有设置控制交叉轴的flex的属性，浏览器会不会有默认的值作为显示处理？
2. 这个例子，为什么b-header设置了100px的高度无效，会被压缩，最小到内容大小？难道会与问题1有关吗？
3. 如果把 b-header里的p标签 显示出来，为什么 b-header的高度又正常，不被压缩了？这里的flex-shrink是怎么计算的权重？
4. 如果 b-container 的flex属性改为 flex:1 0 auto;height:0; 为什么与 flex:1 1 0%的表现形式一样，flex-basis按不是子元素的内容高度计算吗，与flex元素的高度难道有联系吗？

Answer 1

首先问题1和2 MDN Flex布局 都可以解答,
问题1，会有以下默认值flex-shrink: 1; flex-basis: auto; flex-wrap: nowrap;

问题2，文章中有说明，当内容超过了容器，会按flex-shrink进行压缩，由于默认都是1，所以大约计算可知b-header高度为 100/(100+2000+20) * 600 = 28.3，可以通过浏览器查看一下

问题3，可以看下张鑫旭的Oh My God，CSS flex-basis原来有这么多细节这篇文章。以下是节选:

flex-basis值是auto的时候，width属性值也是被打入冷宫的，只是，这个时候，由于后宫放权，所以，冷宫也是有影响力的。什么意思呢？

flex-basis:auto的含义是，子项的基本尺寸根据其自身的尺寸决定。而这个自身尺寸与下面这几个方面有关：

• box-sizing盒模型（这个已经介绍过了）；
• width/min-width/max-width等CSS属性设置；
• content内容（min-content最小宽度）；

这里height的作用是限制了子元素p的高度，从而达到了间接影响flex-basis计算。也就是flex-basis:auto时是根据内容来计算的，但是由于b-header的height限制了内容的高度，也就是限制了p的高度，然后计算flex-basis:auto时只有文本和p可见的部分。这里你可以把p的height 设置的小一点，你可以看到b-header的height并没有作用

问题4的话，看张鑫旭的那篇文章应该能够解答

所以，用flex的时候，需要用width/height时最好直接用 flex-basis ，混用的话，还是有许多奇怪的问题