Как задать flex-блоку высоту во весь вьюпорт?

Как задать flex-блоку в левой колонке (.leftCol) высоту во весь вьюпорт? height: 100vh; указан, но блок почему-то больше (выше) видимой части. Хотя, по идее, должен быть по её высоте. max-height: 100vh; - не помогает.

html, body { position: relative; border: 0; margin: 0; background: grey; }

* { box-sizing: border-box; }

#wrappHead {
  display: flex;
  flex-direction: column;
  position: -webkit-sticky; /* Для "Safari" */
  position: sticky;
  top: 0;
}
#wrappHead > div {
  border: 1px solid;
}

#topHeadAccount {
  display: flex;
  flex-direction: column;
}
#topHeadAccount > div {
  border: 1px solid lightgreen;
  background: rgb(241, 101, 41);
}

#topHeadToo {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
#topHeadToo > div {
  border: 1px solid yellow;
}

#listHead {
  width: 20%;
  background: LightGray;
}

#trHead {
  width: 80%;
  background: LightGray;
}

#content-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background: rgb(0, 150, 208);
}
#content-container > div {
  height: 100vh; border: 1px solid red; background: blue;
}

.leftCol {
  height: 100vh; /* Test11 */
  display: flex; /* Test11 */
  justify-content: center; /* Test11 */
  align-items: center; /* Test11 */
  /* Test11... спан по центру. */
  width: 20%;
}

.headFo {
  height: 20px;
  position: -webkit-sticky; /* Для "Safari" */
  position: sticky;
  bottom: 0;
  background: lightgreen;
}

.trCol { width: 80%; }
<div id='wrappHead'>
  
  <div id='topHeadAccount'>
    <div>&nbsp;acc</div>
    <div>&nbsp;tooPanel</div>
  </div>
  
  <div id='topHeadToo'>
    <div id='listHead'>&nbsp;list1</div>
    <div id='trHead'>&nbsp;list2</div>
  </div>
  
</div>

<div id='content-container'>
  
  <div class="leftCol">
    <div class="headFo"></div>
    <!-- Test11 -->
    &nbsp;3
    <p>
    <br>&nbsp;&nbsp; <span class="no-PL-User">Тест строка...</span> <!-- Test11 -->
    <br>&nbsp;&nbsp; <span class="no-PL-User">Тест строка 2...</span> <!-- Test11 -->
    </p>
  </div>
  
  <div class="trCol">
    строка <br>новая строка <br>новая строка 2 <br>новая строка 3 <br>новая строка 4 <br>новая строка 5 <br>новая строка 6 <br>новая строка 7 <br>новая строка 8 <br>новая строка 9 <br><br>новая строка 10 <br><br>новая строка 11 <br><br>новая строка 12 <br><br>новая строка 13 <br><br>новая строка 14 <br><br>новая строка 15<br><br>новая строка 16
  </div>

</div>

Вот код: https://codepen.io/valera10/pen/YzgvwNr


Ответы (0 шт):