inline-size-bfc-floats.html (1778B)
1 <!doctype html> 2 <title>CSS Container Queries Test: inline-size constrained by floats - layout moving forwards</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#size-container"> 4 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#containment-inline-size"> 5 <link rel="match" href="inline-size-bfc-floats-ref.html"> 6 <style> 7 .float { float: left; background-color: blue; } 8 .right { float: right; } 9 10 #outer { width: 400px; } 11 #float1 { width: 200px; height: 150px; } 12 #float2 { width: 250px; height: 100px; } 13 #float3 { width: 300px; height: 100px; } 14 15 #container { container-type: inline-size; } 16 17 /* Initially, text + 200px of red content (#content1 + #content2) is too tall 18 to make #container fit by #float1 */ 19 .content { height: 100px; background-color: red; } 20 21 /* Trying to fit #container beside #float2 causes the width to remove 22 #content1. text + 100px of red content (#content2) is too tall to fit 23 beside #float2. It would at this point fit beside #float1, but that would 24 cause the width to increase again, and the spec says layout always moves 25 forward. */ 26 @container (width < 200px) { 27 #content1 { display: none } 28 } 29 30 /* Trying to fit #container beside #float3 causes the rest of the red content 31 (#content2) to disappear. */ 32 @container (width < 150px) { 33 #content2 { display: none } 34 } 35 </style> 36 <p>You should see the text "no red" to the left of the third float and no red.</p> 37 <div id="outer"> 38 <div id="float1" class="float right"></div> 39 <div id="float2" class="float left"></div> 40 <div id="float3" class="float right"></div> 41 42 <div id="container"> 43 No red 44 <div id="content1" class="content"></div> 45 <div id="content2" class="content"></div> 46 </div> 47 </div>