| <!doctype html> |
| <title>Flexbox Test: display:table flex items with flex-shrink/flex-grow/flex-basis</title> |
| <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1673006"> |
| <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-property"> |
| <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1673006"> |
| <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1454330"> |
| <link rel="match" href="table-item-flex-percentage-width-ref.html"> |
| <link rel="stylesheet" href="/fonts/ahem.css"> |
| <style> |
| html,body { |
| color:black; background-color:white; font:20px/1 Ahem; padding:0; margin:0; |
| } |
| |
| .container { |
| display: flex; |
| width: 180px; |
| border: 1px solid blue; |
| } |
| |
| .container > * { |
| background-color: cyan; |
| display: table; |
| } |
| .test1 > * { |
| flex-shrink: 0; |
| width: 100%; |
| } |
| .test2 > * { |
| flex-shrink: 0; |
| width: 50%; |
| } |
| .test3 > * { |
| flex-shrink: 0.5; |
| width: 50%; |
| } |
| .test4 > * { |
| flex-grow: 0.1; |
| width: 50%; |
| } |
| .test5 > * { |
| flex-shrink: 0.2; |
| flex-grow: 0.5; |
| width: 10%; |
| } |
| .base > * { |
| flex-basis: 100px; |
| } |
| .large-base { |
| width: 100px; |
| } |
| .large-base > * { |
| flex-basis: 200px; |
| } |
| </style> |
| |
| <div class="container test1"> |
| <div>1</div> |
| <div>2</div> |
| <div>3</div> |
| </div> |
| |
| <div class="container test2"> |
| <div>1</div> |
| <div>2</div> |
| <div>3</div> |
| </div> |
| |
| <div class="container test3"> |
| <div>1</div> |
| <div>2</div> |
| <div>3</div> |
| </div> |
| |
| <div class="container test4"> |
| <div>1</div> |
| <div>2</div> |
| <div>3</div> |
| </div> |
| |
| <div class="container test5"> |
| <div>1</div> |
| <div>2</div> |
| <div>3</div> |
| </div> |
| |
| <div class="container test1 base"> |
| <div>1</div> |
| <div>2</div> |
| <div>3</div> |
| </div> |
| |
| <div class="container test2 base"> |
| <div>1</div> |
| <div>2</div> |
| <div>3</div> |
| </div> |
| |
| <div class="container test3 base"> |
| <div>1</div> |
| <div>2</div> |
| <div>3</div> |
| </div> |
| |
| <div class="container test4 base"> |
| <div>1</div> |
| <div>2</div> |
| <div>3</div> |
| </div> |
| |
| <div class="container test5 base"> |
| <div>1</div> |
| <div>2</div> |
| <div>3</div> |
| </div> |
| |
| <div class="container test1 large-base"> |
| <div>1</div> |
| <div>2</div> |
| <div>3</div> |
| </div> |
| |
| <div class="container test2 large-base"> |
| <div>1</div> |
| <div>2</div> |
| <div>3</div> |
| </div> |
| |
| <div class="container test3 large-base"> |
| <div>1</div> |
| <div>2</div> |
| <div>3</div> |
| </div> |
| |
| <div class="container test4 large-base"> |
| <div>1</div> |
| <div>2</div> |
| <div>3</div> |
| </div> |
| |
| <div class="container test5 large-base"> |
| <div>1</div> |
| <div>2</div> |
| <div>3</div> |
| </div> |