nested-orthogonal-flexbox-relayout.html (858B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Flexbox: nested orthogonal children on relayout.</title> 4 <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property"> 5 <link rel="match" href="reference/nested-orthogonal-flexbox-relayout-ref.html"> 6 <meta name="assert" content="This test ensures nested orthogonal flex items get properly relaid out when flexbox changes dimensions."/> 7 <style> 8 #column { 9 display: flex; 10 flex-direction: column; 11 border: 5px solid yellow; 12 } 13 14 #row { 15 display: flex; 16 flex-direction: row; 17 border: 5px solid blue; 18 } 19 20 .item { 21 border: 5px solid green; 22 } 23 </style> 24 <body> 25 <div id="column"> 26 <div id="row"> 27 <div class="item">This text should not overflow its box</div> 28 </div> 29 </div> 30 <script> 31 var columnBox = document.getElementById("column"); 32 columnBox.offsetHeight; 33 columnBox.style.width = "200px"; 34 </script>