The dropdown has 14 items. But if you make the height of your browser smaller to the point where you don't see dropdown item 5. When you scroll down you won't be able to see all 14 of the drop down items. How can this be fixed in a way where you can see all 14 items on small screens?

header {
  position: fixed;
  height: 5rem;
  width: 100%;
  background: blue;
}

.dropdown {
  position: absolute;
  max-height: 500px;
  max-width: 448px;
  overflow: auto;
}

.dropdown-item {
  background: orange;
  padding: 2rem;
  border-bottom: 1px solid white;
}

<header class="header">
  <div class="dropdown">
    <div class="dropdown-item">dropdown item 1</div>
    <div class="dropdown-item">dropdown item 2</div>
    <div class="dropdown-item">dropdown item 3</div>
    <div class="dropdown-item">dropdown item 4</div>
    <div class="dropdown-item">dropdown item 5</div>
    <div class="dropdown-item">dropdown item 6</div>
    <div class="dropdown-item">dropdown item 7</div>
    <div class="dropdown-item">dropdown item 8</div>
    <div class="dropdown-item">dropdown item 9</div>
    <div class="dropdown-item">dropdown item 10</div>
    <div class="dropdown-item">dropdown item 11</div>
    <div class="dropdown-item">dropdown item 12</div>
    <div class="dropdown-item">dropdown item 13</div>
    <div class="dropdown-item">dropdown item 14</div>
  </div>
</header>

<div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum neque quos, beatae tempora porro repudiandae consequuntur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perferendis aut sapiente omnis obcaecati magnam veniam asperiores nam reiciendis! Numquam, cum omnis rem fugiat iusto blanditiis assumenda nihil, officia obcaecati similique error facilis aliquam odio pariatur autem ipsum ipsa provident vitae enim. Reiciendis odit minus magnam saepe quod optio aliquid dolores illum accusantium labore neque, rerum soluta repellendus et. Est laudantium excepturi distinctio mollitia veniam dolorum, beatae quam nemo? Obcaecati asperiores laboriosam, iste praesentium optio omnis corporis facilis. Vel quisquam voluptas delectus expedita, tenetur quis praesentium hic necessitatibus illum mollitia deserunt similique quaerat repellendus totam sunt quia unde assumenda! Illum voluptatum eius excepturi, veniam quos explicabo adipisci magnam voluptatem nostrum, aliquid hic corrupti. Quisquam sapiente mollitia quidem voluptatibus accusamus dolore nostrum repellendus, eum consequatur minus totam impedit veritatis repudiandae consequuntur explicabo aut, officiis corrupti iusto necessitatibus itaque exercitationem, perspiciatis minima. Voluptas sequi veritatis tempora optio laudantium eaque, est voluptatum doloribus aspernatur amet incidunt necessitatibus harum eos velit suscipit. Eos harum, doloremque ipsa voluptate velit odit nesciunt id dignissimos neque mollitia provident illo tempore quisquam officiis sint vero cumque perferendis cum sapiente! Velit sed eos harum ea necessitatibus minus eveniet aperiam provident neque impedit enim vitae vel inventore repellendus voluptate porro architecto odit ipsa soluta quidem accusamus, suscipit quod doloribus? Laudantium esse odio in adipisci nam tempora optio sint eius blanditiis ratione pariatur, quibusdam debitis, dolores molestias, officiis officia laboriosam ut explicabo sunt necessitatibus molestiae aut voluptates eaque accusantium. Praesentium odio voluptatum atque ex necessitatibus a earum consectetur, ratione nesciunt amet vel provident, facere sapiente dolor, cumque sunt magni sint? Voluptas eveniet id quaerat dignissimos et, quos ex!</div>

The dropdown has 14 items. But if you make the height of your browser smaller to the point where you don't see dropdown item 5. When you scroll down you won't be able to see all 14 of the drop down items. How can this be fixed in a way where you can see all 14 items on small screens?

header {
  position: fixed;
  height: 5rem;
  width: 100%;
  background: blue;
}

.dropdown {
  position: absolute;
  max-height: 500px;
  max-width: 448px;
  overflow: auto;
}

.dropdown-item {
  background: orange;
  padding: 2rem;
  border-bottom: 1px solid white;
}

<header class="header">
  <div class="dropdown">
    <div class="dropdown-item">dropdown item 1</div>
    <div class="dropdown-item">dropdown item 2</div>
    <div class="dropdown-item">dropdown item 3</div>
    <div class="dropdown-item">dropdown item 4</div>
    <div class="dropdown-item">dropdown item 5</div>
    <div class="dropdown-item">dropdown item 6</div>
    <div class="dropdown-item">dropdown item 7</div>
    <div class="dropdown-item">dropdown item 8</div>
    <div class="dropdown-item">dropdown item 9</div>
    <div class="dropdown-item">dropdown item 10</div>
    <div class="dropdown-item">dropdown item 11</div>
    <div class="dropdown-item">dropdown item 12</div>
    <div class="dropdown-item">dropdown item 13</div>
    <div class="dropdown-item">dropdown item 14</div>
  </div>
</header>

<div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorum neque quos, beatae tempora porro repudiandae consequuntur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perfertur suscipit ut! Fugiat consequuntur eligendi sint totam itaque, soluta, iusto excepturi nobis illo quod aliquam harum? Sit quidem voluptatibus nihil animi omnis! Impedit, cumque ratione unde perferendis aut sapiente omnis obcaecati magnam veniam asperiores nam reiciendis! Numquam, cum omnis rem fugiat iusto blanditiis assumenda nihil, officia obcaecati similique error facilis aliquam odio pariatur autem ipsum ipsa provident vitae enim. Reiciendis odit minus magnam saepe quod optio aliquid dolores illum accusantium labore neque, rerum soluta repellendus et. Est laudantium excepturi distinctio mollitia veniam dolorum, beatae quam nemo? Obcaecati asperiores laboriosam, iste praesentium optio omnis corporis facilis. Vel quisquam voluptas delectus expedita, tenetur quis praesentium hic necessitatibus illum mollitia deserunt similique quaerat repellendus totam sunt quia unde assumenda! Illum voluptatum eius excepturi, veniam quos explicabo adipisci magnam voluptatem nostrum, aliquid hic corrupti. Quisquam sapiente mollitia quidem voluptatibus accusamus dolore nostrum repellendus, eum consequatur minus totam impedit veritatis repudiandae consequuntur explicabo aut, officiis corrupti iusto necessitatibus itaque exercitationem, perspiciatis minima. Voluptas sequi veritatis tempora optio laudantium eaque, est voluptatum doloribus aspernatur amet incidunt necessitatibus harum eos velit suscipit. Eos harum, doloremque ipsa voluptate velit odit nesciunt id dignissimos neque mollitia provident illo tempore quisquam officiis sint vero cumque perferendis cum sapiente! Velit sed eos harum ea necessitatibus minus eveniet aperiam provident neque impedit enim vitae vel inventore repellendus voluptate porro architecto odit ipsa soluta quidem accusamus, suscipit quod doloribus? Laudantium esse odio in adipisci nam tempora optio sint eius blanditiis ratione pariatur, quibusdam debitis, dolores molestias, officiis officia laboriosam ut explicabo sunt necessitatibus molestiae aut voluptates eaque accusantium. Praesentium odio voluptatum atque ex necessitatibus a earum consectetur, ratione nesciunt amet vel provident, facere sapiente dolor, cumque sunt magni sint? Voluptas eveniet id quaerat dignissimos et, quos ex!</div>

• html
• css

• 1 How can it be fixed if you have 1000 items in a drop-down list? They won't fit anywhere. And still, you will have access to all of them. What's the problem? If this is just the inconvenience, you can devise something more convenient, not a drop-down. Drop-down was really invented for some pretty small lists. – Sergey A Kryukov Commented Feb 4 at 18:16
• 2 By the way, your snipped doesn't show a drop-down element. This is just a statically exposed tree view. It could be perfectly fine though, just don't use the term “drop-down”. The only problem that snipped demonstrates is that the most outer element is shown with scrolling, and the list element's scroll should fit into the view. Is that the problem you're trying to solve? – Sergey A Kryukov Commented Feb 4 at 18:21

1 Answer 1

Make the dropdown container (which should be a list BTW) a flex column and tell it to wrap when the max-height is exceeded.

* {
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

header {
  position: fixed;
  height: 5rem;
  width: 100%;
  background: blue;
}

.dropdown {
  position: absolute;
  max-height: 100vh;
  max-width: 448px;
  overflow: auto;
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.dropdown-item {
  background: orange;
  padding: .5rem;
  border-bottom: 1px solid white;
  margin: .25em;
}

<header class="header">
  <ul class="dropdown">
    <li class="dropdown-item">dropdown item 1</li>
    <li class="dropdown-item">dropdown item 2</li>
    <li class="dropdown-item">dropdown item 3</li>
    <li class="dropdown-item">dropdown item 4</li>
    <li class="dropdown-item">dropdown item 5</li>
    <li class="dropdown-item">dropdown item 6</li>
    <li class="dropdown-item">dropdown item 7</li>
    <li class="dropdown-item">dropdown item 8</li>
    <li class="dropdown-item">dropdown item 9</li>
    <li class="dropdown-item">dropdown item 10</li>
    <li class="dropdown-item">dropdown item 11</li>
    <li class="dropdown-item">dropdown item 12</li>
    <li class="dropdown-item">dropdown item 13</li>
    <li class="dropdown-item">dropdown item 14</li>
    <li class="dropdown-item">dropdown item 15</li>
  </ul>
</header>