<!DOCTYPE html>
<html>
<head>
<style>
div {
outline: 1px solid black;
background: hsla(210,100%,90%, .8);
padding: 5px;
margin: 5px;
}
.flexbox {
display: flex;
}
.row {
flex-direction: row;
}
.column {
display: flex;
flex-direction: column;
}
.flex {
flex: 1 0 auto;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/check-layout-th.js"></script>
</head>
<body onload="checkLayout('.flexbox')">
<div id=log></div>
There should be two boxes of equal height on the left and 3 boxes of equal
height on the right.
<div class="flexbox row" style="width: 600px">
<div data-expected-width=290 data-expected-height=220 class="column flex">
<div data-expected-width=270 data-expected-height=95 class="flex"></div>
<div data-expected-width=270 data-expected-height=95 class="flex"></div>
</div>
<div data-expected-width=290 data-expected-height=220 class="column flex">
<div data-expected-width=270 data-expected-height=60 class="flex" style="height: 50px;"></div>
<div data-expected-width=270 data-expected-height=60 class="flex" style="height: 50px;"></div>
<div data-expected-width=270 data-expected-height=60 class="flex" style="height: 50px;"></div>
</div>
</div>
None of the boxes should overflow and the inner most boxes should be end aligned.
<div class="flexbox column" style="width: 600px; height: 300px; position: relative;">
<div data-expected-width=590 data-expected-height=250 class="column flex" style="justify-content: flex-end">
<div data-offset-y="180" data-expected-width=570 data-expected-height=30 style="height: 20px; flex: none;"></div>
<div data-offset-y="220" data-expected-width=570 data-expected-height=30 style="height: 20px; flex: none;"></div>
</div>
<div data-expected-width=590 data-expected-height=30 style="height: 20px; flex: none;"></div>
</div>
</body>
</html>
Codebase Browser
chromium