OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <!-- |
| 3 Any copyright is dedicated to the Public Domain. |
| 4 http://creativecommons.org/publicdomain/zero/1.0/ |
| 5 --> |
| 6 <html> |
| 7 <head> |
| 8 <title>CSS Test: Testing the sizing of a stretched horizontal flex container i
n a vertical flex container</title> |
| 9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> |
| 10 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"> |
| 11 <link rel="match" href="flexbox-align-self-stretch-vert-001-ref.html"> |
| 12 <meta name="assert" content="If a stretched flex item's main size is influence
d by its cross size, and the flex container has a definite cross size, then the
item's cross size should be resolved early so that it can be used when determini
ng the item's main size"> |
| 13 <meta name="assert" content="https://drafts.csswg.org/css-flexbox/issues-cr-20
12#issue-23"> |
| 14 <meta charset="utf-8"> |
| 15 <style> |
| 16 div.fixedWidthWrapper { |
| 17 width: 200px; |
| 18 /* Small enough that 3 characters can _easily_ fit in our width */ |
| 19 font-size: 12px; |
| 20 } |
| 21 div.vertContainer { |
| 22 display: flex; |
| 23 flex-direction: column; |
| 24 } |
| 25 div.vertItem { |
| 26 background: red; |
| 27 } |
| 28 div.horizContainer { |
| 29 display: flex; |
| 30 } |
| 31 div.horizItem { |
| 32 flex: 1; |
| 33 background: lime; |
| 34 } |
| 35 </style> |
| 36 </head> |
| 37 <body> |
| 38 <div class="fixedWidthWrapper"> |
| 39 <div class="vertContainer"> |
| 40 <div class="vertItem"> |
| 41 <div class="horizContainer"> |
| 42 <div class="horizItem">A B C</div> |
| 43 <div class="horizItem"></div> |
| 44 </div> |
| 45 </div> |
| 46 </div> |
| 47 </div> |
| 48 </body> |
| 49 </html> |
OLD | NEW |