| <!DOCTYPE html> |
| <title>flexbox | justify-content: center / overflow</title> |
| <link rel="author" href="http://opera.com" title="Opera Software"> |
| <link rel="author" href="mailto:dgrogan@chromium.org" title="David Grogan"> |
| <link rel="help" |
| href="http://www.w3.org/TR/css-flexbox-1/#justify-content-property"> |
| <meta name="assert" content="Items that overflow a singleline justify-content:center flexbox container are positioned correctly."> |
| |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/check-layout-th.js"></script> |
| |
| Blue is the flexbox. Orange are items that overflow it. |
| |
| <style> |
| .flexbox { |
| background: blue; |
| margin-left: 50px; |
| height: 150px; |
| width: 50px; |
| display: flex; |
| justify-content: center; |
| position: relative; |
| } |
| span { |
| background: orange; |
| margin: 10px; |
| flex: 1 0 40px; |
| } |
| </style> |
| |
| <div class=flexbox> |
| <span data-expected-width=40 data-offset-x=-55></span> |
| <span data-expected-width=40 data-offset-x=5></span> |
| <span data-expected-width=40 data-offset-x=65></span> |
| </div> |
| |
| <script> |
| checkLayout('span'); |
| </script> |