flexbox-single-line-clamp-3.html (1062B)
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="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 9 <link rel="match" href="flexbox-single-line-clamp-3-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 min-height: 80px; 16 17 /* Don't let (default) align-content:stretch save us 18 by stretching the line to fit the container! The point 19 here is that the line should already be clamped to the 20 container's min-height. */ 21 align-content: flex-start; 22 } 23 .panel { 24 background: lightblue; 25 width: 150px; 26 } 27 .contents { 28 height: 10px; 29 width: 10px; 30 background: purple; 31 } 32 </style> 33 </head> 34 <div class="container"> 35 <div class="panel"> 36 <div class="contents"></div> 37 </div> 38 </div>