css3/flexbox/flex-algorithm-min-max.html

<!DOCTYPE html>
<html>
<style>
body {
    margin: 0;
}
.flexbox {
    width: 600px;
    display: -webkit-flex;
    background-color: #aaa;
    position: relative;
}
.flexbox div {
    height: 20px;
    border: 0;
}

.flexbox :nth-child(1) {
    background-color: blue;
}
.flexbox :nth-child(2) {
    background-color: green;
}
.flexbox :nth-child(3) {
    background-color: red;
}
</style>
<script>
if (window.testRunner)
    testRunner.dumpAsText();
</script>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.flexbox')">
<div class="flexbox">
  <div data-expected-width="100" style="-webkit-flex: 1 0 0; max-width: 100px;"></div>
  <div data-expected-width="250" style="-webkit-flex: 1 0 0;"></div>
  <div data-expected-width="250" style="-webkit-flex: 1 0 0;"></div>
</div>

<!-- The first two flexitems should hit their max width and the third item fills the remaining space. -->
<div class="flexbox">
  <div data-expected-width="50" style="-webkit-flex: 1 0 0; max-width: 50px;"></div>
  <div data-expected-width="300" style="-webkit-flex: 4 0 0; max-width: 300px;"></div>
  <div data-expected-width="250" style="-webkit-flex: 1 0 0;"></div>
</div>

<div class="flexbox">
  <div data-expected-width="100" style="-webkit-flex: 1 0 0; max-width: 100px;"></div>
  <div data-expected-width="300" style="-webkit-flex: 1 0 200px; max-width: 300px;"></div>
  <div data-expected-width="200" style="-webkit-flex: 1 0 0;"></div>
</div>

<!-- Test min-width. -->
<div class="flexbox">
  <div data-expected-width="350" style="-webkit-flex: 1 1 400px; min-width: 350px;"></div>
  <div data-expected-width="250" style="-webkit-flex: 1 1 400px;"></div>
</div>

<!-- The flex items can overflow the flexbox. -->
<div class="flexbox">
  <div data-expected-width="350" style="-webkit-flex: 1 1 400px; min-width: 350px;"></div>
  <div data-expected-width="300" style="-webkit-flex: 2 0 300px; max-width: 300px;"></div>
  <div data-expected-width="0" style="-webkit-flex: 1 0 0;"></div>
</div>

<div class="flexbox">
  <div data-expected-width="100" data-offset-x="0" style="-webkit-flex: 1 0 0; margin: 0 auto; max-width: 100px;"></div>
  <div data-expected-width="333" data-offset-x="100" style="-webkit-flex: 2 0 0;"></div>
  <div data-expected-width="167" data-offset-x="433" style="-webkit-flex: 1 0 0;"></div>
</div>

<!-- min-width and max-width take priority over the preferred size. -->
<div class="flexbox">
  <div data-expected-width="500" style="-webkit-flex: 1 0 0; min-width: 300px"></div>
  <div data-expected-width="100" style="-webkit-flex: 1 0 50%; max-width: 100px"></div>
</div>

<div class="flexbox" style="width: 200px">
  <div data-expected-width="150" style="-webkit-flex: 1; min-width: 150px"></div>
  <div data-expected-width="50" style="-webkit-flex: 1; max-width: 90px"></div>
</div>

<div class="flexbox" style="width: 200px">
  <div data-expected-width="150" style="-webkit-flex: 1; min-width: 120px"></div>
  <div data-expected-width="50" style="-webkit-flex: 1; max-width: 50px"></div>
</div>

<div class="flexbox" style="width: 200px">
  <div data-expected-width="100" style="-webkit-flex: 1; min-width: 100px"></div>
  <div data-expected-width="100" style="-webkit-flex: 3;"></div>
</div>

<div class="flexbox" style="width: 200px">
  <div data-expected-width="150" style="-webkit-flex: 1 50px; min-width: 100px"></div>
  <div data-expected-width="50" style="-webkit-flex: 1 100px; max-width: 50px"></div>
</div>

<div class="flexbox">
  <div data-expected-width="80" style="-webkit-flex: 1"></div>
  <div data-expected-width="160" style="-webkit-flex: 2"></div>
  <div data-expected-width="360" style="-webkit-flex: 1; min-width: 360px"></div>
</div>

</body>
</html>