multicol-inside-container.html (723B)
1 <!doctype html> 2 <title>CSS Container Queries Test: Multicol inside size container</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#size-container"> 4 <link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> 5 <style> 6 #container { 7 container-type: size; 8 width: 200px; 9 height: 100px; 10 } 11 @container (width <= 200px) { 12 #multicol { 13 column-count: 2; 14 column-gap: 0; 15 } 16 } 17 #green { 18 display: inline-block; 19 width: 100%; 20 height: 100px; 21 background-color: green; 22 vertical-align: bottom; 23 } 24 </style> 25 <p>Test passes if there is a filled green square.</p> 26 <div id="container"> 27 <div id="multicol"><div id="green"></div></div> 28 </div>