justify-content-006.html (955B)
1 <!DOCTYPE html> 2 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> 3 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#justify-content-property"> 4 <meta name="assert" content="Flex item in nested column flexbox is justified properly."> 5 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/check-layout-th.js"></script> 9 10 <style> 11 .outer { 12 display: flex; 13 flex-direction: column; 14 width: 100px; 15 border: 2px solid black; 16 position: relative; 17 } 18 .middle { 19 flex: 0 0 50px; 20 min-height: 50px; 21 display: flex; 22 flex-direction: column; 23 justify-content: flex-end; 24 } 25 </style> 26 27 Test passes if orange square is in bottom left corner of rectangle. 28 29 <div class="outer"> 30 <div class="middle"> 31 <div style="width: 30px; height: 30px; background: orange" data-offset-y=20></div> 32 </div> 33 </div> 34 35 <script> 36 checkLayout('.middle > div'); 37 </script>