flexbox-single-line-clamp-2.html (967B)
1 <!doctype html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <meta charset="utf-8"> 7 <title>CSS Test: Single-line flex containers should clamp their line's height to the container's computed min and max cross-size.</title> 8 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:ecoal95@gmail.com"> 9 <link rel="match" href="flexbox-single-line-clamp-2-ref.html"> 10 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#algo-cross-line"> 11 <style> 12 .container { 13 display: flex; 14 background: gray; 15 height: 500px; 16 flex-direction: column; 17 max-width: 250px; 18 } 19 .panel { 20 background: lightblue; 21 border: 1px solid purple; 22 } 23 .small-box { 24 width: 100px; 25 height: 100px; 26 } 27 .big-box { 28 width: 500px; 29 height: 100px; 30 } 31 </style> 32 <div class="container"> 33 <div class="panel"> 34 <div class="small-box"></div> 35 </div> 36 <div class="panel"> 37 <div class="big-box"></div> 38 </div> 39 </div>