Заставить блок с контентом уходить под шапку, а меню нет

Question

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
 
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
 
.header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 2222;
  background: #0808;
}
.content {
  display:flex;
  flex: 1; /* блок займет оставшееся место родителя */
  background: #fcc;
}
.mn {
  background: #fff;
  width: 240px;
  overflow-y: auto;
}
.st {
  background: red;
  flex:1;
}

<div class="header">
  <p>
    Lorem ipsum odor amet, consectetuer adipiscing elit. Quis imperdiet viverra efficitur senectus faucibus accumsan. Vivamus nibh ornare sit urna ultrices semper tellus. Cubilia suscipit enim praesent libero vulputate himenaeos. Eu dictumst quisque ridiculus dapibus ac risus netus. Id tempor ut enim vehicula penatibus tristique nulla cras. Ridiculus tincidunt adipiscing ornare consequat per imperdiet velit curabitur. At risus placerat nisi inceptos eleifend conubia eget eleifend phasellus.
  </p>
</div>
<div class="content">
  <div class='mn'>
     menu
     <br><br><br><br>
     menu
     <br><br><br><br>
     menu
     <br><br><br><br>
     menu
     <br><br><br><br>
     menu
     <br><br><br><br>
     menu
     <br><br><br><br>
     menu
     <br><br><br><br>
     menu
     <br><br><br><br>
     menu
     <br><br><br><br>
     menu
     <br><br><br><br>
     menu
     <br><br><br><br>
     menu
     <br><br><br><br>
     menu
     <br><br><br><br>
     menu
     <br><br><br><br>menu
     <br><br><br><br>
     menu
     <br><br><br><br>
     menu
     <br><br><br><br>
     menu
     <br><br><br><br>menu
     <br><br><br><br>
     menu
     <br><br><br><br>
     menu
     <br><br><br><br>
     menu
     <br><br><br><br>
     menu
     <br><br><br><br>
     menu
     <br><br><br><br>
  </div>
  <div class='st'>
    Text
    <br><br><br><br>
    Text
    <br><br><br><br>Text
    <br><br><br><br>
    Text
    <br><br><br><br>
    Text
    <br><br><br><br>
    Text
    <br><br><br><br>
    Text
    <br><br><br><br>
    Text
    <br><br><br><br>
    Text
    <br><br><br><br>
    Text
    <br><br><br><br>Text
    <br><br><br><br>
    Text
    <br><br><br><br>
    Text
    <br><br><br><br>
    Text
    <br><br><br><br>
    Text
    <br><br><br><br>
    Text
    <br><br><br><br>
    Text
    <br><br><br><br>
    Статьи
  </div>
</div>

Шапка при скролинге зафиксирована, возможно убрать свойство position: sticky;. Контент при этом прыгать не будет
Красный блок уходит под шапку, это хорошо.

Но как сделать так, чтобы меню не уходило под шапку, сделать так, чтобы меню занимало высоту от шапки, до самого низа и при необходимости работал скролл?

На некоторых страницах, шапки и меню может не быть. Тут главное, чтобы в очередной раз не пришлось фиксить css под данные страницы. Лишний раз никаких размеров не править. Было бы супер...

На блоке content стоит свойство flex: 1; блок занимает остаточную высоту, что хорошо и при скролинге страницы уходит под шапку, но не работает в силу свойства display:flex;

Множество вариантов перепробовала, не понимаю каким образом возможно сделать. Чтобы и верстка была легкой и адаптивной без лишних фиксаций на тот случаи когда шапки и меню на странице нет.

БЛОГ НА HUSL

Заставить блок с контентом уходить под шапку, а меню нет

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