Enable vertical scrolling on a container of undetermined height

Question

Enable vertical scrolling on a container of undetermined height

Can a vertical scroll be implemented on a container with an unknown height using flexbox?

The use of max-height is not feasible, as it would limit the height to a specific number that may not work for all screen sizes.

Here is a basic example of what is needed:

<div class="list flex-vertical">
  <header>Some header</header>
  <ul class="flex-vertical">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
    ...
  </ul>
</div>

Only the ul should have a scroll, but the height is unknown.

See this pen for reference

html css flexbox

Answer 1

Answer №1

Flex has some limitations or flaws that require an inner absolute element to enforce scrolling.

html, body{
  height: 100%;
  overflow: hidden;
}
.list{
  display: flex;
  flex-direction: column;
  height: 100%;
}
header {
  flex: 0;
}
.vertical {
  flex: 1;
  position: relative;  
}
.scroll {  
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

<div class="list flex-vertical">
  <header>Some header</header>
  <div class="vertical">
    <ul class="scroll">
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
      <li>Item5</li>
      <li>Item6</li>
      <li>Item7</li>
      <li>Item8</li>
      <li>Item9</li>
      <li>Item10</li>
      <li>Item11</li>
      <li>Item12</li>
      <li>Item13</li>
      <li>Item14</li>
      <li>Item15</li>
      <li>Item16</li>
      <li>Item17</li>
      <li>Item18</li>
      <li>Item19</li>
      <li>Item20</li>
      <li>Item21</li>
      <li>Item22</li>
      <li>Item23</li>
      <li>Item24</li>
      <li>Item25</li>
      <li>Item26</li>
      <li>Item27</li>
      <li>Item28</li>
    </ul>
  </div>
</div>

Answer 2

Flex has some limitations or flaws that require an inner absolute element to enforce scrolling.

html, body{
  height: 100%;
  overflow: hidden;
}
.list{
  display: flex;
  flex-direction: column;
  height: 100%;
}
header {
  flex: 0;
}
.vertical {
  flex: 1;
  position: relative;  
}
.scroll {  
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

<div class="list flex-vertical">
  <header>Some header</header>
  <div class="vertical">
    <ul class="scroll">
      <li>Item1</li>
      <li>Item2</li>
      <li>Item3</li>
      <li>Item4</li>
      <li>Item5</li>
      <li>Item6</li>
      <li>Item7</li>
      <li>Item8</li>
      <li>Item9</li>
      <li>Item10</li>
      <li>Item11</li>
      <li>Item12</li>
      <li>Item13</li>
      <li>Item14</li>
      <li>Item15</li>
      <li>Item16</li>
      <li>Item17</li>
      <li>Item18</li>
      <li>Item19</li>
      <li>Item20</li>
      <li>Item21</li>
      <li>Item22</li>
      <li>Item23</li>
      <li>Item24</li>
      <li>Item25</li>
      <li>Item26</li>
      <li>Item27</li>
      <li>Item28</li>
    </ul>
  </div>
</div>

Enable vertical scrolling on a container of undetermined height

Answer №1

Similar questions

Reduce the size of the header in the Sydney theme for WordPress as you scroll

Deletion of a custom function in JavaScript

What is the best way to align an element next to another using id or class?

Reusing Form HTML Elements Based on Conditions

Using two body tags in the code of a Wordpress site can lead to malfunctioning

How to conceal 'subnavigation' elements within Buddypress

What could be the reason for my jQuery script not functioning properly?

I encountered an error in JavaScript where the function .val() is not recognized on the selected answer, throwing

Navigation problems resolved: The fixed-top class causes issues with navbar-right and obscures the logo

Preventing Repetition in an HTML List using JavaScript

Incorporate row numbering feature into jQuery DataTables

The menu item is having trouble aligning to the right side

Choose a particular element within an element class using a variable as the selector in jQuery

Fixing the vertical centering of content when printing HTML

What is the method to choose the following CSS element?

What is the best way to implement a dropdown menu with JavaScript or jQuery?

Enhance the functionality of your website by implementing a zoom feature

When clicking on a checkbox's assigned label, Chrome and IE may experience delays in firing the change event

AngularJS - Show Banner after two rows, then show two more rows

Adjusting font size, contrast, brightness, and sound levels on a website with the help of jQuery