contain-inline-size-bfc-floats-002.html (1082B)
1 <!doctype html> 2 <title>CSS Containment Test: inline-size of fit-content bfc constrained by floats, not affected by height</title> 3 <link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size"> 4 <link rel="match" href="contain-inline-size-bfc-floats-002-ref.html"> 5 <style> 6 .float { float: left; background-color: blue; } 7 .right { float: right; } 8 9 #outer { width: 400px; } 10 #float1 { width: 200px; height: 100px; } 11 #float2 { width: 250px; height: 100px; } 12 #float3 { width: 300px; height: 100px; } 13 14 #contain { 15 contain: inline-size; 16 display: flow-root; 17 width: fit-content; 18 } 19 #orange { 20 display: inline-block; 21 width: 300px; 22 height: 20px; 23 background: orange; 24 vertical-align: top; 25 } 26 </style> 27 <p>You should see a wide orange rectangle to the left of the first float, overlapping the float.</p> 28 <div id="outer"> 29 <div id="float1" class="float right"></div> 30 <div id="float2" class="float left"></div> 31 <div id="float3" class="float right"></div> 32 <div id="contain"> 33 <span id="orange"></span> 34 </div> 35 </div>