1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

      Chrome 73导致flex布局崩坏的分析与解决方法

        发布时间£º2019-04-09 14:33:46   作者£ºNekron   我要评论

      这篇文章主要给大家介绍了关于因Chrome 73导致flex布局崩坏的解决方法£¬文中通过示例代码介绍的非常详细£¬对大家的学习或者工作具有一定的参考学习价值£¬需要的朋友们下面来一起学习学习吧

      现象

      项目中会存在如下几种嵌套flex结构£º

      <style>
        /* 通用样式 */
        .card {
          width: 200px;
          height: 300px;
          margin: 20px;
          border: 1px solid #999;
        }
        .flex {
          display: flex;
          flex-direction: column;
        }
        .header {
          flex: none;
          height: 40px;
          border-bottom: 1px solid #333;
        }
        .scroll {
          overflow-y: auto;
        }
        .p {
          margin: 10px;
          height: 400px;
          background-color: rgba(0, 0, 0, 0.2);
        }  
      </styl>
        
      <!-- 布局一 -->
      <div class="card flex">
        <div class="header">Header</div>
        <div class="flex">
          <div class="scroll">
            <div class="p"></div>
          </div>
        </div>
      </div>
        
      <!-- 布局二 -->
      <div class="card flex">
        <div class="flex">
          <div class="header">Header</div>
          <div class="scroll" style="flex-grow:1;">
            <div class="p"></div>
          </div>
        </div>
      </div>

      这在Chrome 73之前的?#23548;?#23637;示效果如下£¨手头的Electron——Chrome 69£©£º

      ?#38469;?#31526;合期望的结果£¬scroll是可以滚动的区域£¬然而£¬Chrome 73的展示效果?#35789; ¿?/p>

      父元素的高度都被子元素撑开了£¬导致scroll元素无法滚动¡£what? why? 纳尼£¿

      原因

      究其原因£¬规范有关高度的解释在这一章节£¬简单概括就是£º

      flex元素的最小大小£¨视主轴方向决定是高还是宽£©是内部内容的大小¡£即£¬min-height/min-width默认值是“auto”¡£

      emmm...读“规范”千遍£¬其义自见¡£当再三理解这个结论后发觉£¬似乎£¬新版Chrome的实现是符合规范的£¡确实£¬Chrome的此举改动就是为了让浏览器的flex布局行为更贴近规范¡£

      Chrome社区的这个issue£ºFlexbox rendering changed between chrome 71 and 72£¬对上面的问题£¨布局二£©£¬进行了激烈的?#33268;àP?#29978;至最终导致了官方的回滚¡£

      至于我们为什么后知后觉£¬直到73才大面积暴露该问题£¬下文花絮会展开解释¡£

      不过£¬跟着规范走是完全的政治正确£¬怎?#27492;?#37117;对£¡开发者只能顺应潮流去改变¡£

      修复

      其实£¬当看到这个现象后£¬我的内心并没有经历太大的波动£¬因为min-width曾经已经给我上过预备课了£¨详见下文花絮£©¡£所以我很快就找到了解放方式¡£

      找到最外层被撑开的元素£¬上文两种布局里£¬?#38469;Çscroll的直属父元素£¬对其增加min-height: 0的属性即可修复异常布局¡£

      如果min-height的行为实在无法理解的话£¬overflow: hidden£¨非visible£©也能达到同样的功效¡£overflow平时用的比较多£¬相对会更有体感£¬如下例£º

      <div style="height: 200px;overflow: scroll;">
        <div style="height: 400px"></div>
      </div>

      ?#22791;?#20803;素设置了overflow:hidden/scroll£¬展示时£¬父元素就会隐藏子元素的溢出部分¡£

      当然£¬flex布局中的overflow£¬它的?#23548;?#20316;用也就?#21069;Ñmin-height设置为0¡£

      此外£¬还可以对子元素£¬上文示例中即scroll元素£¬设置height: 100%来修?#30784;?#20294;当层级比较多时£¬需要将该属性一层层往下传递£¬?#36824;?#29615;保¡£

      花絮

      问题是顺利修复了£¬下面是一些插曲~

      1. Chrome 71->72->73

      这个改动首发于Chrome 72£¬但为什么直到Chrome 73才被我们注意到£¿因为Chrome 72发布后£¬由于反响强烈£¬Chrome决定?#28982;?#28378;改动£¬给开发者更多的时间来?#35270;?#35813;改动¡£

      然而Chrome 72的发布£¬以及72的后续回滚发布都发生在中国?#33322;?#20551;期期间£¬没什么用户反馈£¬对于中国开发者£¬例如我£¬完全没注意到这次预警¡£¡£¡£

      2. min-width的学前教育

      为什?#27492;?#25105;已经被min-width提前教育过£¿

      我实现过类似编辑器的tab£º

      这里就是嵌套的flex横向布局£¬在默认样式下£¬滚动区会被子元素撑开£¬也就是此时£¬我第一次领略了当初就觉得很奇怪的min-width: 0的写法¡£

      那为什么那?#26412;?#38656;要显式声明父元素的min-width呢£¿此外£¬这次升级所造成的误伤?#38469;?#21457;生在纵向布局的flex上£¬那横向布局的flex有影响吗£¿

      答案其实很狗血£¬因为Chrome对于min-width的默认值£¬从很早期就设置为符合规范的“auto”了¡£¡£¡£

      参考

      1. Flexbox sets height of inside element to 0
      2. MDN min-height
      3. MDN min-width

      总结

      以上就是这篇文章的全部内容了£¬希望本文的内容对大家的学习或者工作具有一定的参考学习价值£¬谢谢大家对脚?#23616;?#23478;的支持¡£

      相关文章

      最新评论

      3dÊÔ»úºÅÖвÊÍø

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>