HTML scrollable list with variable

Question

I am building a UX where the page needs to have header and footer glued to the top and bottom of the screen, and the main section in the middle must take up all the space.

One of the views that goes within that main section has 3 columns:

fixed width column with a vertical list with "card" elements
two columns that take up the rest of the space evenly.

Each "card" is a rectangle of some size, with content inside.

The list with these cards must stretch in its available space and have a scrollbar if there are too many cards.

html,
body {
  width: 100wv;
  height: 100hv;
  margin: 0;
  padding: 0;
}

.page-header {
  background-color: greenyellow;
  height: 5em;
  align-content: center;
  padding: 1em;
}

.page-footer {
  background-color: lightblue;
  height: 5em;
  align-content: center;
  padding: 1em;
}

.grid {
  display: grid;
  grid-template-columns: 15em 1fr 1fr;
  grid-gap: 10px;
  background-color: rgba(255, 0, 0, .7);
  height: 100%;
  margin: 0;
  padding: 0;
}

.column {
  font-family: "Helvetica Neue", sans-serif;
  color: white;
  text-transform: uppercase;
  font-size: 12px;
  background-color: rgba(0, 0, 0, .2);
  display: flex;
  padding: 12px;
  gap: 8px;
  margin: 0;
}

.cards-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  overflow-y: auto;
}

.card {
  width: 15em;
  height: 10em;
  background-color: lightblue;
  padding: 4px;
  border: 1px solid black;
}

<div class="page-header">
  PAGE HEADER THINGS GO HERE, HEIGHT NOT KNOWN TO THE COMPONENTS BELOW
</div>
<div class="grid">
  <div class="column">
    <div class="cards-list">
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="card">Card 3</div>
      <div class="card">Card 4</div>
      <div class="card">Card 5</div>
    </div>
  </div>
  <div class="column"></div>
  <div class="column"></div>
</div>
<div class="page-footer">
  Footer stuff
</div>

https://playcode.io/2573733

The problem is the height: 100% on the grid doesn't do anything. On a large screen the grid doesn't expand to fill the page, and on a small screen there's no scroll bar on the list, instead there's one on the page itself.

Q1: How do I make cards list show a scrollbar when the page is small? Q2: How do I make the red grid grow to fill the page?

Ori Drori · Accepted Answer · 2025-10-07 16:39:04Z

The grid can be the wrapping element for both header, footer, and columns.

To make the list scrollable, you'll need it's parent to prevent overflow using overflow: hidden.

Note: other problems were width: 100wv; height: 100hv; instead of vw and vh.

html,
body {
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-columns: 15em 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-gap: 0 10px;
  background-color: rgba(255, 0, 0, .7);
  height: 100vh;
}

.page-header,
.page-footer {
  grid-column: 1/-1;
  height: 2em; /* changed to fit the SO snippet */
  align-content: center;
  padding: 1em;
}

.page-header {
  grid-row: 1;
  background-color: greenyellow;
}

.page-footer {
  grid-row: 3;
  background-color: lightblue;
}

.column {
  grid-row: 2;
  font-family: "Helvetica Neue", sans-serif;
  color: white;
  text-transform: uppercase;
  font-size: 12px;
  background-color: rgba(0, 0, 0, .2);
  display: flex;
  padding: 12px;
  gap: 8px;
  overflow: hidden;
}

.cards-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 10px;
  scrollbar-gutter: stable; /** save space for the scrollbar **/
  overflow-y: auto;
}

.card {
  width: 15em;
  height: 10em;
  background-color: lightblue;
  padding: 4px;
  border: 1px solid black;
}

<div class="grid">
  <div class="page-header">
    PAGE HEADER THINGS GO HERE, HEIGHT NOT KNOWN TO THE COMPONENTS BELOW
  </div>
  <div class="column">
    <div class="cards-list">
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="card">Card 3</div>
      <div class="card">Card 4</div>
      <div class="card">Card 5</div>
      <div class="card">Card 6</div>
      <div class="card">Card 7</div>
      <div class="card">Card 8</div>
      <div class="card">Card 9</div>
      <div class="card">Card 10</div>
    </div>
  </div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="page-footer">
    Footer stuff
  </div>
</div>

Collectives™ on Stack Overflow

HTML scrollable list with variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related