position-sticky-flexbox-ref.html (1379B)
1 <!DOCTYPE html> 2 <title>Reference for position:sticky elements should work correctly with flexbox</title> 3 4 <style> 5 .scroller { 6 overflow: scroll; 7 width: 350px; 8 height: 100px; 9 margin-bottom: 15px; 10 } 11 12 .flex-container { 13 width: 600px; 14 position: relative; 15 display: flex; 16 flex-flow: row wrap; 17 } 18 19 .green { 20 background-color: green; 21 } 22 23 .flex-item { 24 height: 85px; 25 width: 100px; 26 display: flex; 27 } 28 </style> 29 30 <script> 31 window.addEventListener('load', function() { 32 document.getElementById('scroller1').scrollLeft = 50; 33 document.getElementById('scroller2').scrollLeft = 150; 34 document.getElementById('scroller3').scrollLeft = 250; 35 }); 36 </script> 37 38 <p>You should see three green boxes of varying size below. There should be no red or blue.</p> 39 40 <div id="scroller1" class="scroller"> 41 <div class="flex-container"> 42 <div class="flex-item"></div> 43 <div class="green flex-item"></div> 44 <div class="green flex-item"></div> 45 </div> 46 </div> 47 48 <div id="scroller2" class="scroller"> 49 <div class="flex-container"> 50 <div class="flex-item"></div> 51 <div class="flex-item"></div> 52 <div class="green flex-item"></div> 53 </div> 54 </div> 55 56 <div id="scroller3" class="scroller"> 57 <div class="flex-container"> 58 <div class="flex-item"></div> 59 <div class="flex-item"></div> 60 <div class="green flex-item"></div> 61 <div class="green flex-item"></div> 62 </div> 63 </div>