<!DOCTYPE html> <html> <title>CSS Flexbox: the width calculation of flexbox with flex-direction: column and flex-wrap: wrap</title> <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-containers"> <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-direction-property"> <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-wrap-property"> <link rel="bookmark" href="https://crbug.com/607262"> <link rel="bookmark" href="https://crbug.com/607856"> <meta name="assert" content="This test ensures that the width of a flexbox with 'flex-direction: column' and 'flex-wrap: wrap' is updated when the wrapping column dynamically changes."> <link href="support/flexbox.css" rel="stylesheet"> <style> .flexbox { width: 600px; height: 160px; outline: 2px solid black; } .item { height: 20px; background-color: green; margin: 5px; } </style> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script src="/resources/check-layout-th.js"></script> <script> function change() { var flex = document.getElementById("test"); flex.offsetWidth; flex.style.height = "60px"; checkLayout('.flexbox'); } </script> <body onload="change()"> <div id=log></div> <p>The green boxes should all be within the black box</p> <div class="flexbox column wrap" id="test"> <div class="item" data-expected-width="290"></div> <div class="item" data-expected-width="290"></div> <div class="item" data-expected-width="290"></div> <div class="item" data-expected-width="290"></div> </div>