0

Expanding this question on stackoverflow.

What to modify in the CSS to make the col2 show scroll bar when the space is constrained vertically to the point it does not fit on the screen? Currently the scroll bar is displayed for the entire page.

HTML and CSS:

html,
body {
  height: 100%;
  margin: 0
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row.header {
  flex: 0 1 auto;
}

.box .row.content {
  display: flex;
  flex-flow: row;
  flex: 1 1 auto;
}

#col1 { 
  flex: 0 1 50px;
  background: lightgreen;
}

#col2 { 
  flex: 1 1 auto;
  overflow: auto;
  background: lightblue;
}

.box .row.footer {
  flex: 0 1 40px;
}
<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <div id="col1" class="col">col 1</div>
    <div id="col2" class="col">
      <p>col 2</p>
      <p>col 2</p>
      <p>col 2</p>
      <p>col 2</p>
      <p>col 2</p>
      <p>col 2</p>
      <p>col 2</p>
      <p>col 2</p>
    </div>
  </div>  
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

This example is also here: https://jsfiddle.net/0ejLg25m/10/

Jacek Kołodziejczyk
  • 634
  • 1
  • 6
  • 12
  • In order to generate a scrollbar, you need an overflow condition. But if you have the height of the element set to `auto`, meaning that the element will stretch / shrink based on content size, there will never be an overflow. You need a hard limit somewhere. – Michael Benjamin Apr 14 '20 at 20:49

1 Answers1

1

flex items have a min width/height equal to content, this will prevent the scrollbars because the parent will grow to fit the content.

In this case it's the height so we need to apply min-height:0; on the parent of col2.

html,
body {
  height: 100%;
  margin: 0
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row.header {
  flex: 0 1 auto;
}

.box .row.content {
  display: flex;
  flex-flow: row;
  flex: 1 1 auto;
  min-height: 0;
}

#col1 {
  flex: 0 1 50px;
  background: lightgreen;
}

#col2 {
  flex: 1 1 auto;
  overflow: auto;
  background: lightblue;
}

.box .row.footer {
  flex: 0 1 40px;
}
<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <div id="col1" class="col">col 1</div>
    <div id="col2" class="col">
      <p>col 2</p>
      <p>col 2</p>
      <p>col 2</p>
      <p>col 2</p>
      <p>col 2</p>
      <p>col 2</p>
      <p>col 2</p>
      <p>col 2</p>
      <p>col 2</p>
      <p>col 2</p>
      <p>col 2</p>
      <p>col 2</p>
      <p>col 2</p>
      <p>col 2</p>
      <p>col 2</p>
      <p>col 2</p>
    </div>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>
Rainbow
  • 6,772
  • 3
  • 11
  • 28