| <!DOCTYPE html> |
| <!-- |
| | Combined tests for basic functionality of CSS Flexible Box Layout Module. |
| | https://www.w3.org/TR/css-flexbox-1 |
| | This test focuses on content-based minimum size. |
| --> |
| <html> |
| <head> |
| <style> |
| body { |
| margin: 0px; |
| font-family: Roboto; |
| background-color: #808080; |
| font-size: 12px; |
| } |
| .inlineflex { |
| display:inline-flex; |
| color: #99b9f3; |
| background-color: #ffee08; |
| opacity: 0.75; |
| } |
| .container { |
| overflow: hidden; |
| flex-flow: row wrap; |
| justify-content: space-around; |
| align-items: center; |
| align-content: flex-end; |
| min-width: 2px; |
| padding: 2px; |
| border: 2px solid #000060; |
| outline: 2px solid #00f000; |
| margin: 6px; |
| } |
| .blue { |
| background-color: #0047ab; |
| } |
| .hidden { |
| overflow: hidden; |
| } |
| .visible { |
| overflow: visible; |
| } |
| |
| </style> |
| </head> |
| <body> |
| |
| <div class="inlineflex container" style="max-width: 20px;"> |
| <span class="blue">HHHHH</span> |
| </div> |
| |
| <div class="visible inlineflex container" style="max-width: 20px;"> |
| <span class="blue">VVVVV</span> |
| </div> |
| |
| <div class="visible inlineflex container" style="max-width: 20px;"> |
| <span class="hidden blue">HHHHH</span> |
| </div> |
| |
| <div class="inlineflex container" style="max-width: 20px;"> |
| <span class="blue" style="min-width: 5px;">mHHHm</span> |
| </div> |
| |
| <div class="visible inlineflex container" style="max-width: 20px;"> |
| <span class="blue" style="min-width: 5px;">mVVVm</span> |
| </div> |
| |
| </body> |
| </html> |
| |
