背景

实现一个上下弹性盒，左右弹性盒，左右盒子中又有弹性盒的布局。

codepen代码

横向盒 弹性盒内容超出

  1. <div class='top'>
  2.     <div class='left'></div>
  3.     <div class='right'>23534设防的稳定服我的文档5435</div>
  4.   </div>
  1. .top{
  2.   height:30px;
  3.   background:red;
  4.   display:flex;
  5.    .left{
  6.     width:1460px;
  7.   }
  8.   .right{
  9.     flex:1;
  10.     // 可以 建议方案
  11.     width:0;
  12.     // 也可以
  13.    // overflow:hidden;
  14.   }
  15. }

竖向盒 弹性盒内容超出

  1.  <div class='main-left'>
  4.        <div class='main-left-main'>
  5.          <div class='wrapper'><div class='demo'> erf </div></div>
  6.        </div>
  7.         <div class='main-left-top'>
  8.        </div>
  10.    </div>

目前增加一个可滚动绝地定位容器解决内容多导致的超出问题。（当然你可以常识用calc得出计算高度，或者再降级设置一个最大的高度）

  1. .main-left{
  2.   flex:1;
  3.   background:yellow;
  4.   display:flex;
  5.   flex-direction:column;
  6.    overflow:hidden;
  7. }
  8. .main-left-top{
  9.   height:30px;
  11. }
  12. .main-left-main{
  13.   flex:1;
  14.   background:pink;
  15.   overflow:hidden;
  16.   height:0;
  17.  position:relative;
  18.   .wrapper{
  20.     position:absolute;
  21.     top:0;
  22.     bottom:0;
  23.     left:0;
  24.     right:0;
  25.      overflow:auto;
  26.   }
  27. //   测试的demo元素
  28.   .demo{
  29.     height:700px;
  30.     overflow:auto;
  31.   }
  33. }

然后我测试了下简单的弹性盒的表现，就是只有垂直方向的弹性盒，不是弹性套弹性盒，这种设置overflow:auto即可。

  1. <div class='m-container'>
  2.   <div class='m-main'><div style="height:400px"></div> </div>
  3.   <div class='m-top'>sdf </div>
  5. </div>
  1.  .m-container{
  2.    display:flex;
  3.   width:100%;
  4.   flex-direction:column;
  6. }
  7.  .m-top{
  8.   height:380px;
  10. }
  11.  .m-main{
  12.  flex:1;
  13.  background:red;
  14. white-space:normal;
  15. word-break:break-all;
  16.  // height:calc(100vh - 700px);
  17.    overflow:auto;
  18. }

更多

属性生效顺序 ：width|height > 内容大小 > flex空间