| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>CSS Sizing: stretch on float resolves against containing block</title> |
| <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing"> |
| <link rel="match" href="stretch-float-ref.html"> |
| <meta name="assert" content=" |
| A float with width:stretch should resolve to the containing block width, |
| not shrink to avoid sibling floats. Per CSS Sizing 4 section 6.1, stretch |
| fills the containing block. |
| "> |
| <style> |
| .stretch { |
| width: -webkit-fill-available; |
| width: stretch; |
| float: left; |
| height: 20px; |
| background: green; |
| } |
| </style> |
| <p>Test passes if there are two filled green rectangles of equal width and <strong>no red</strong>.</p> |
| <div style="width: 200px; background: red"> |
| <div class="stretch"></div> |
| <div></div> |
| <div class="stretch"></div> |
| </div> |
