scrollable-contains-boxes-with-hidden-overflow-1-ref.html 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <!DOCTYPE html>
  2. <style>
  3. * {
  4. scrollbar-width: none;
  5. }
  6. html {
  7. background: white;
  8. }
  9. body {
  10. position: absolute;
  11. inset: 0px;
  12. display: flex;
  13. background: pink;
  14. }
  15. #outer {
  16. overflow-x: hidden;
  17. overflow-y: scroll;
  18. background: orange;
  19. margin-top: 100px;
  20. }
  21. #inner {
  22. height: 1000px;
  23. background: magenta;
  24. }
  25. .item {
  26. overflow: hidden;
  27. background: yellow;
  28. }
  29. .wrapper {
  30. box-sizing: border-box;
  31. border: 1px solid black;
  32. background: lime;
  33. height: 50px;
  34. width: 200px;
  35. display: flex;
  36. justify-content: center;
  37. align-items: center;
  38. }
  39. </style><body><div id="outer"><div id="inner">
  40. <div class="item"><div class="wrapper">11</div></div>
  41. <div class="item"><div class="wrapper">12</div></div>
  42. <div class="item"><div class="wrapper">13</div></div>
  43. <div class="item"><div class="wrapper">14</div></div>
  44. <div class="item"><div class="wrapper">15</div></div>
  45. <div class="item"><div class="wrapper">16</div></div>
  46. <div class="item"><div class="wrapper">17</div></div>
  47. <div class="item"><div class="wrapper">18</div></div>
  48. <div class="item"><div class="wrapper">19</div></div>
  49. <div class="item"><div class="wrapper">20</div></div>
  50. <div class="item"><div class="wrapper">21</div></div>
  51. <div class="item"><div class="wrapper">22</div></div>
  52. <div class="item"><div class="wrapper">23</div></div>
  53. <div class="item"><div class="wrapper">24</div></div>
  54. <div class="item"><div class="wrapper">25</div></div>
  55. <div class="item"><div class="wrapper">26</div></div>
  56. <div class="item"><div class="wrapper">27</div></div>
  57. <div class="item"><div class="wrapper">28</div></div>
  58. <div class="item"><div class="wrapper">29</div></div>
  59. <div class="item"><div class="wrapper">30</div></div>
  60. <div class="item"><div class="wrapper">31</div></div>
  61. <div class="item"><div class="wrapper">32</div></div>
  62. <div class="item"><div class="wrapper">33</div></div>
  63. <div class="item"><div class="wrapper">34</div></div>
  64. <div class="item"><div class="wrapper">35</div></div>
  65. <div class="item"><div class="wrapper">36</div></div>
  66. <div class="item"><div class="wrapper">37</div></div>
  67. <div class="item"><div class="wrapper">38</div></div>
  68. <div class="item"><div class="wrapper">39</div></div>
  69. <div class="item"><div class="wrapper">40</div></div>
  70. <div class="item"><div class="wrapper">41</div></div>
  71. <div class="item"><div class="wrapper">42</div></div>
  72. <div class="item"><div class="wrapper">43</div></div>
  73. <div class="item"><div class="wrapper">44</div></div>
  74. <div class="item"><div class="wrapper">45</div></div>
  75. <div class="item"><div class="wrapper">46</div></div>
  76. <div class="item"><div class="wrapper">47</div></div>
  77. <div class="item"><div class="wrapper">48</div></div>
  78. <div class="item"><div class="wrapper">49</div></div>
  79. <div class="item"><div class="wrapper">50</div></div>