scrollbars-no-margin.html (2265B)
1 <!DOCTYPE html> 2 <head> 3 <title>Scrollbars inside flexbox with direction and writing-mode</title> 4 <link rel="author" title="Google, Inc." href="http://www.google.com/"> 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> 7 <link rel="match" href="scrollbars-no-margin-ref.html"> 8 <link rel="help" href="https://drafts.csswg.org/css-flexbox/"> 9 10 <script src="support/scrollbars.js"></script> 11 12 <style> 13 .horizontal-header { 14 width: 120px; 15 } 16 .vertical-header { 17 width: 60px; 18 } 19 .container-row { 20 display: flex; 21 flex-direction: row; 22 align-items: flex-start; 23 justify-content: flex-start; 24 } 25 .container { 26 flex: none; 27 margin: 5px; 28 } 29 .ltr { 30 direction: ltr; 31 } 32 .rtl { 33 direction: rtl; 34 } 35 .horizontal { 36 writing-mode: horizontal-tb; 37 } 38 .flipped-blocks { 39 writing-mode: vertical-rl; 40 } 41 .flipped-lines { 42 writing-mode: vertical-lr; 43 } 44 .flex { 45 border: 2px solid red; 46 display: flex; 47 overflow: scroll; 48 max-width: 100px; 49 max-height: 100px; 50 font-size: 0; 51 scrollbar-width: thin; 52 scrollbar-color: black white; 53 } 54 .column { 55 flex-direction: column; 56 } 57 .column-reverse { 58 flex-direction: column-reverse; 59 } 60 .row { 61 flex-direction: row; 62 } 63 .row-reverse { 64 flex-direction: row-reverse; 65 } 66 .flex > .leaf1, .flex > .leaf2, .flex > .leaf3 { 67 flex: none; 68 width: 30px; 69 height: 30px; 70 border: 2px solid blue; 71 display: flex; 72 flex-direction: column; 73 justify-content: center; 74 } 75 .flex > div > div { 76 font-size: 20px; 77 text-align: center; 78 flex: none; 79 } 80 </style> 81 82 </head> 83 84 <div class="container-row"> 85 <div class="vertical-header ltr horizontal"></div> 86 <div class="horizontal-header ltr horizontal">ltr<br>horizontal-tb</div> 87 <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-rl</div> 88 <div class="vertical-header ltr flipped-blocks">ltr<br>vertical-lr</div> 89 <div class="horizontal-header rtl horizontal">rtl<br>horizontal-tb</div> 90 <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-rl</div> 91 <div class="vertical-header rtl flipped-blocks">rtl<br>vertical-lr</div> 92 </div> 93 94 <script> 95 flexDirections.forEach((flexDirection) => { 96 var containerRow = createContainerRow(flexDirection); 97 document.body.appendChild(containerRow); 98 }); 99 </script>