contain-inline-size-bfc-floats-001.html (1174B)
1 <!doctype html> 2 <title>CSS Containment Test: inline-size of fit-content bfc constrained by floats, affected by height via its contents</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-001-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 line-height: 1em; 19 } 20 #filler { height: 150px; } 21 #orange { 22 display: inline-block; 23 width: 200px; 24 height: 20px; 25 background: orange; 26 vertical-align: top; 27 } 28 </style> 29 <p>You should see a wide orange rectangle to the left of the third float, overlapping the float.</p> 30 <div id="outer"> 31 <div id="float1" class="float right"></div> 32 <div id="float2" class="float left"></div> 33 <div id="float3" class="float right"></div> 34 <div id="contain"> 35 <span id="orange"></span> 36 <div id="filler"></div> 37 </div> 38 </div>