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

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