Сделать столбец в строке показывать вертикальную полосу прокрутки, если она не умещается на экране

Question

Расширение этого вопроса в stackoverflow.

Что изменить в CSS, чтобы col2 показывал полосу прокрутки, когда пространство ограничено вертикально до точки, которой это не делает поместиться на экране? В настоящее время полоса прокрутки отображается для всей страницы.

HTML и 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>

Этот пример также здесь: https://jsfiddle.net/0ejLg25m/10/

Answer 1

flex-элементы имеют минимальную ширину / высоту, равную содержанию, это предотвратит полосы прокрутки, потому что родительский элемент увеличится, чтобы соответствовать содержимому.

В этом случае это высота, поэтому мы должны применить min-height:0; на родителя 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>