Question 45730 in CSS Question posted in
Some basic documentation can be found here.

How do you make one nested cell of a flexbox overflow: scroll? – CSS

I have looked at every similar question on Stack Overflow but none of them address this specific scenario.

HTML:

<div class="container">
  <div class="top">Top area</div>
  <div class="bottom">
    <div class="left">
      <div class="filters">Filters</div>
      <div class="scrollContainer">
        <ul class="item">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>0</li>
        </ul>
      </div>
    </div>
    <div class="main">Main area</div>
  </div>
</div>

CSS:

body {
  height: 100%;
  margin: 0;
  
  background-color: #F5F5F5;
  overflow: hidden;
}

.top {
  height: 150px;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  
  background-color: #594255;
  overflow: hidden;
}

.bottom {
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow: hidden;
}

.left {
  overflow: hidden;
}

.scrollContainer {
  overflow: scroll;
}

.item {
  margin: 1px;
  
  background-color: #fff;
  
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 3em;
  color: #594255;
   
  flex: 1;
}

ul {
  list-style-type: none;
}

I want the white div to scroll when it overflows, and everything else stay fixed. What is the simplest way to achieve this without using fixed (pixel) heights?

Tags:

2

Answers


  1. 0

    You need to have some fixed height somewhere along the line to trigger the overflow. That, along with flex properties, should do the trick in this case for taller screens. You’ll still need to decide what height you want for shorter screens. Here’s an example:

    body {
  /* height: 100%; */ /* percentage height won't work here without defined height on parent (html) element */
  height: 100vh; /* new; simple solution */
  margin: 0;
  background-color: #F5F5F5;
  overflow: hidden;
}

.container {
  height: 100%; /* works because height defined on parent (body) element */
  display: flex;
  flex-direction: column;
  background-color: #594255;
  overflow: hidden;
}

.top {
  flex-shrink: 0; /* new; disable shrink */
  height: 150px;
}

.bottom {
  height: calc(100vh - 150px); /* new */
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.left {
  height: 100%; /* new */
  display: flex; /* new */
  flex-direction: column; /* new */
  overflow: hidden;
}

.scrollContainer {
  overflow: scroll;
}

.item {
  margin: 1px;
  background-color: #fff;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 3em;
  color: #594255;
   
  flex: 1;
}

ul {
  list-style-type: none;
}
    <div class="container">
  <div class="top">Top area</div>
  <div class="bottom">
    <div class="left">
      <div class="filters">Filters</div>
      <div class="scrollContainer">
        <ul class="item">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>0</li>
        </ul>
      </div>
    </div>
    <div class="main">Main area</div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    In your case, you only need to set the height for the wrapper (currently this html), this will be enough. And then flexbox will do everything:

    html{
  height: 100%;
  display: flex;
  flex-direction: column;
}

body {
  flex: auto;
  display: flex;
  flex-direction: column;
  min-height: 1px;
  margin: 0;
  background-color: #F5F5F5;
}

.container {
  flex: auto;
  display: flex;
  flex-direction: column;
  min-height: 1px;
  background-color: #594255;
}

.top {
  height: 150px;
  flex: none;
}

.bottom {
  flex: auto;
  display: flex;
  min-height: 1px;
}

.left {
  display: flex;
  flex-direction: column;
}

.filters {
  flex: none;
}

.scrollContainer {
  flex: auto;
  min-height: 1px;
  overflow-y: scroll;
}

.item {
  margin: 1px;
  list-style-type: none;
  background-color: #fff;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 3em;
  color: #594255;
}
    <div class="container">
  <div class="top">Top area</div>
  <div class="bottom">
    <div class="left">
      <div class="filters">Filters</div>
      <div class="scrollContainer">
        <ul class="item">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>0</li>
        </ul>
      </div>
    </div>
    <div class="main">Main area</div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search