【ie浏览器的兼容】css flex布局兼容ie10, ie11, 问题吐血总结，菜鸟必看

每日鸡汤，每一个你想要学习的念头都是未来的你向自己求救

场景：在ie11【safari浏览器】中A使用flex布局，同时A里面有一个img标签的子元素，且img的宽度是用百分比设置的情况，会出现A的高度很高，除非给A手动或者img设置非百分比的高度，

但是很多时候高度是变化的。那么要怎么处理这种情况呢？

<div class="A>
    <img />
</div>


.A {
    width: 100px;
    display: flex; // 容器flex 布局
}

img {
    width: 10%; //宽用百分比设定
    height: 10%; // 用百分比设置高度，不好使
}

很简单，在A的样式中增加flex-shrink: 0即可， 或者加入flex: 0 0 auto（推荐）;

参考链接

还是需要深入了解，flex-grow 和flex-shrink

1. flex-shrink: flex元素本身的收缩规则，flex元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩大小是依据flex-shrink 的值。 初始值是1。
   1. Internet Explorer 10 使用 0 而不是 1 作为 flex-shrink 属性的初始值，其他的浏览器或这ie11的flex-shrink默认值就是1。
   2. 在一个从上至下的flex布局中，你会发现有的元素被压缩，应该首先想到这个属，chrome上一般不设置，也不会有这个问题，父元素的高度会被默认撑开，但是ie就需要设置一遍。
   3. flex-shrink: 0 表示元素不会收缩
2. flex-grow 指定flex容器中剩余空间的多少应该分配给该项目，flex-grow: 0 不增长。

重要的一个css 值flex: 0 0 auto

参考

1. flex推荐使用简写 shorthand
2. flex-basic 我还以为是标准线呢， 其实指定了flex元素在主轴方向上的初始大小 flex: 0% 相对于其父弹性盒主轴尺寸的百分比，负值不允许，默认为auto(固定尺寸由内容决定)
3. flex: 0  ==== flex: 0 1 0% ; => flex-grow: 0 ; flex-shrink: 0 ; flex-basis: 0% ; 最终表现是最小内容宽度
4. flex: none ==== flex: 0 0 auto; 最终表现为最大内容宽度， 会溢出容器，没有换行
5. flex: 1 ==== flex: 1 1 0%  适用于等分布局
6. flex: auto === flex: 1 1 auto 适用于基于内容动态适配的布局

todo flex 布局还有好多好多好多需要学习的

---------------

20210823补充，在safari浏览器中flex布局也会出现，父元素的高度无法被子元素自动撑开的情况，解决办法也是在父元素中加入flex-shink： 1

ie浏览器隐藏滚动条

-ms-overflow-style: none // ie

-webkit-scrollbar { // chrome
    display: none
}

-webkit-scrollbar { // chrome
    width: 0px 
}