image.png

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8"> 
    5. <title>菜鸟教程(runoob.com)</title>
    6. <style> 
    7. #main
    8. {
    9.     width:420px;
    10.     height:300px;
    11.     border:1px solid black;
    12.     display:flex;
    13. }
    15. #main>div
    16. {
    17.     flex:1;
    18.     margin-left:13px;
    19.     display:flex;
    20.     flex-direction:column;
    21.     /*align-content:stretch;*/
    23. }
    24.     .div22
    25. {
    26.     flex: 1;
    27.     overflow-y:hidden;
    28.     margin-top:13px;
    30. }
    31. </style>
    32. </head>
    33. <body>
    35. <div id="main">
    36.   <div style="background-color:coral;">红模压工基本原则工基本原则工基本原则工基本原则工基本原则工基本原则色</div>
    37.   <div style="background-color:lightblue;">蓝茜茜大规模夺色</div>  
    38.   <div style="background-color:lightgreen;">
    39.       <div style="background-color:red;" class="div22">带sadfasasdf有夺模压模模压模压压</div>
    40.       <div style="background-color:yellow;" class="div22">仍欠</div>
    41.       <div style="background-color:red;" class="div22">带sadfasasdf有夺模压模模压模压压</div>
    42.   </div>
    43. </div>
    46. </body>
    47. </html>