Что делать если выпадающее меню в фиксированном блоке вылазит за пределы страницы, невозможно просмотреть все пункты

Question

Ситуация такая:

Фиксированный header c меню и подменю. В подменю много пунктов и их значительную часть не видно на экранах с небольшой высотой из-за position:fixed родителя. В будущем количество пунктов меню будет увеличиваться. Очень нужно что-то универсальное.

Менять дизайн я не имею права. Есть ли какой-то рецепт для борьбы с этой проблемой? Мне не кажется эта ситуация редкой, однако найти что-то по этому вопросу не удалось. Помогите пожалуйста, бьюсь с этим второй день. Набросала простенький пример такой ситуации в песочнице: ссылка

  <header class="header">
    <div class="logo">? Logotype</div>
    <nav class="menu">
      <ul class="list">
        <li class="item">About Us</li>
        <li class="item">Projects
          <ul class="second-list">
            <li class="second-item">Awesome Project</li>
            <li class="second-item">Super Project</li>
            <li class="second-item">WOW Project</li>
            <li class="second-item">Nice Project</li>
            <li class="second-item">Awesome Project</li>
            <li class="second-item">Super Project</li>
            <li class="second-item">WOW Project</li>
            <li class="second-item">Nice Project</li>
            <li class="second-item">Awesome Project</li>
            <li class="second-item">Super Project</li>
            <li class="second-item">WOW Project</li>
            <li class="second-item">Nice Project</li>
          </ul>
        </li>
        <li class="item">News</li>
        <li class="item">Contacts</li>
      </ul>
    </nav>
  </header>



.header {
  position: fixed;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
}

.list {
  display: flex;
  justify-content: space-between;
}

.item {
  display: inline-block;
  margin-right: 30px;
  position: relative;
  padding: 10px;
  cursor: pointer;
}

.second-list {
  display:none;
  position: absolute;
  list-style-type: none;
  margin-left: 0; 
  padding-left: 0;
}

.item:hover .second-list {
  display: block;
}

.second-item {
  padding: 10px;
  width: 200px;
  cursor: pointer;
}

Answer 1

Можно добавить списку второго уровня стили: height: 320px; overflow: auto;

Для того, чтобы появился скролл и стали видны все пункты меню второго уровня. Возможно не совсем красиво, зато до всех пунктов можно добраться. А вообще имеет смысл пересмотреть дизайн страницы для небольших устройств и использовать, например, бургер для меню.

Answer 2

Предложу несколько доработанное решение на основе ответа Ирины Коваленко.

Задавать жёсткую высоту - плохая идея, пунктов в подменю ведь может быть меньше, чем на 320px высоты

Моё решение состоит в том, чтобы ограничить высоту подменю высотой экрана (100vh) минус величина отступа подменю от верха экрана (в данном случае это 70px)

.header {
  background-color: #eff0f3;
  position: fixed;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  font-family: sans-serif;
  font-size: 18px;
  color: #0d0d0d;
}

.logo{
  font-size: 25px;
  font-family: Cambria, serif;
  font-weight: 900;
}

.list {
  display: flex;
  justify-content: space-between;
}

.item {
  display: inline-block;
  margin-right: 30px;
  position: relative;
  padding: 10px;
  cursor: pointer;
}

.second-list {
  display:none;
  position: absolute;
  list-style-type: none;
  margin-left: 0; 
  padding-left: 0;
  background-color:#ff8e3c;
  z-index: 10;
  max-height: calc(100vh - 70px);
  overflow: auto;
}

.item:hover .second-list {
  display: block;
}

.second-item {
  color: #eff0f3;
  padding: 10px;
  width: 200px;
  cursor: pointer;
}

/*Main*/
h1 {
  padding-top: 100px;
  font-family: sans-serif;
  color: #d9376e;
}

p {
  font-family: Calibry, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

<header class="header">
  <div class="logo">? Logotype</div>
  <nav class="menu">
    <ul class="list">
      <li class="item">About Us</li>
      <li class="item">Projects
        <ul class="second-list">
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
          <li class="second-item">Awesome Project</li>
          <li class="second-item">Super Project</li>
          <li class="second-item">WOW Project</li>
          <li class="second-item">Nice Project</li>
        </ul>
      </li>
      <li class="item">News</li>
      <li class="item">Contacts</li>
    </ul>
  </nav>
</header>

<div class="text">
  <h1>The position CSS</h1>
  <p>A positioned element is an element whose computed position value is either relative, absolute, fixed, or sticky. (In other words, it's anything except static.)</p>
  <p>A relatively positioned element is an element whose computed position value is relative. The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset.</p>
  <p>An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative
    to which the element is positioned.) If the element has margins, they are added to the offset. The element establishes a new block formatting context (BFC) for its contents.</p>
  <p>A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or
    the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.</p>
  <p>A positioned element is an element whose computed position value is either relative, absolute, fixed, or sticky. (In other words, it's anything except static.)</p>
  <p>A relatively positioned element is an element whose computed position value is relative. The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset.</p>
  <p>An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative
    to which the element is positioned.) If the element has margins, they are added to the offset. The element establishes a new block formatting context (BFC) for its contents.</p>
  <p>A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or
    the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.</p>
  <p>A positioned element is an element whose computed position value is either relative, absolute, fixed, or sticky. (In other words, it's anything except static.)</p>
  <p>A relatively positioned element is an element whose computed position value is relative. The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset.</p>
  <p>An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative
    to which the element is positioned.) If the element has margins, they are added to the offset. The element establishes a new block formatting context (BFC) for its contents.</p>
  <p>A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or
    the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.</p>
  <p>A positioned element is an element whose computed position value is either relative, absolute, fixed, or sticky. (In other words, it's anything except static.)</p>
  <p>A relatively positioned element is an element whose computed position value is relative. The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset.</p>
  <p>An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative
    to which the element is positioned.) If the element has margins, they are added to the offset. The element establishes a new block formatting context (BFC) for its contents.</p>
  <p>A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or
    the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.</p>
  <p>A positioned element is an element whose computed position value is either relative, absolute, fixed, or sticky. (In other words, it's anything except static.)</p>
  <p>A relatively positioned element is an element whose computed position value is relative. The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset.</p>
  <p>An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative
    to which the element is positioned.) If the element has margins, they are added to the offset. The element establishes a new block formatting context (BFC) for its contents.</p>
  <p>A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or
    the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.</p>
</div>

БЛОГ НА HUSL

Что делать если выпадающее меню в фиксированном блоке вылазит за пределы страницы, невозможно просмотреть все пункты

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