flex布局之 flex-wrap: wrap 导致在各浏览器的

目标

布局目标: header footer固定布局,中间main自适应,正常显示情况如下:

正常.png

代码

部分代码如下:
html:

<div class="container">
  <header>header</header>
  <main>
    <div></div>
    <div></div>
    <div></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </main>
  <footer>footer</footer>
</div>

css:

.container{
    display: flex;
    flex-direction: column;
}
main{
    flex:1; 
    background:yellow;
    display: flex;
    flex-wrap: wrap;
}

在firefox和edge中都正常显示,但在chrome中显示如下:

bug.png

当main中的子元素由于设置了flex-wrap: wrap换行时,导致撑破了main元素,而footer元素紧跟着main,也被捅破了.

debug

1. flex 属性是flex-grow(扩展量) flex-shrink(伸缩量) flex-basis(伸缩基准值)的简写,其默认值是0 1 auto,可设如下值:

• auto: 与 1 1 auto 相同;
• none: 与 0 0 auto 相同;
• initial: 设置该属性为它的默认值，即0 1 auto;
• inherit: 从父元素继承该属性.

通过实验可以设置flex: 1 0 auto 达到最佳效果.