flexbox-single-line-clamp-1.html (859B)
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-1-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 max-height: 200px; 16 } 17 .panel { 18 background: lightblue; 19 width: 150px; 20 border: 1px solid purple; 21 box-sizing: border-box; 22 } 23 .tall-child { 24 width: 50px; 25 height: 400px; 26 } 27 </style> 28 <div class="container"> 29 <div class="panel"> 30 <div class="tall-child"></div> 31 </div> 32 </div>