Как я могу предотвратить расширение вложенного элемента HTML div за пределы экрана? - PullRequest
Новая
       4

Как я могу предотвратить расширение вложенного элемента HTML div за пределы экрана?

1 голос
/ 24 апреля 2020

У меня есть элемент div, вложенный в несколько уровней других элементов div, и я хочу убедиться, что контент не будет отображаться за пределами высоты экрана, но вместо этого позволяет прокручивать внутри этого div. Есть много подобных вопросов, но ни один из тех, которые я нашел, кажется, не применим к произвольным уровням вложенных элементов div. Я пытаюсь сделать все это с HTML / CSS и без жестко запрограммированных значений пикселей.

С двумя уровнями я смог достичь желаемого поведения: 

<html style="height:100%; font-size:50px;">
  <body style="height:100%; margin:0;">
    <div style="width:50%; height:100%; background:green; display:flex; flex-direction:column;">
      1
      <div style="width:50%; height:100%; background:blue; overflow:auto;">
        2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>2<br>
      </div>
    </div>
  </body>
</html>

Однако я не могу получить такое же поведение с тремя или более уровнями: 

<html style="height:100%; font-size:50px;">
  <body style="height:100%; margin:0;">
    <div style="width:50%; height:100%; background:red; display:flex; flex-direction:column;">
      1
      <div style="width:50%; height:100%; background:green; display:flex; flex-direction:column;">
        2
        <div style="width:50%; height:100%; background:blue; overflow:auto;">
          3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>3<br>
        </div>
      </div>
    </div>
  </body>
</html>

Есть ли способ сохранить все в пределах высоты экрана для произвольного числа вложенных уровней div, с прокруткой только на самом глубоком уровне?

1 Ответ

1 голос
/ 24 апреля 2020

Проблема связана с элементами Flex, имеющими минимальную высоту / ширину (зависит от направления), равную содержимому.

Первый пример

Синий элемент вписывается в его родительский элемент, потому что по умолчанию он установлен на сжать, чтобы соответствовать flex-shrink:1; Почему это важно? потому что это не единственный дочерний элемент.

overflow:auto заставляет элемент игнорировать его содержимое, найдите ограничение по высоте и добавьте полосу прокрутки

Второй пример

Синий элемент вписывается внутрь зеленого элемента, как и ожидалось, но зеленый элемент не помещается внутри красного элемента, Почему?

зеленый элемент является гибким элементом поэтому все сказанное выше относится и к нему, но почему оно не сжимается?

Потому что ничто не говорит ему игнорировать его содержание. 

p {
  background: pink;
  height: 9000px;
  margin:0;
}

[green] {
  min-height: 0; /* ignore content */
}
<html style="height:100%;font-size:35px;">

<body style="height:100%; margin:0;">
  <div style="width:80%; height:100%; background:red; display:flex; flex-direction:column;">
    1
    <div green style="width:80%; height:100%; background:green; display:flex; flex-direction:column;">
      2
      <div style="width:50%; height:100%; background:blue; overflow:auto;">
        <p>long content</p>
      </div>
    </div>
  </div>
</body>

</html>

Если зеленый элемент игнорирует его содержимое, он сжимается, чтобы поместиться внутри красного элемента, а синий элемент последует.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...