Проверить наличие переполнения блока на css

Рейтинг: 2Ответов: 0Опубликовано: 29.04.2015

Есть div c overflow:auto. Нужно в случае наличия у него горизонтального скролла ограничить его высоту max-height:100vh, а в случае отсутствия горизонтального скролла, никак её не ограничивать.

Возможно ли сделать такое в современных браузерах, если использовать только css?

В следующем примере проблема со вторым блоком. http://jsfiddle.net/177krpja/1/

.block {
    white-space: pre;
    line-height: 1.5em;
    margin-bottom: 10px;
    max-height: 7.5em; /* По вопросу тут 100vh */
    overflow: auto;
    background: #ccc;
}
<div class="block">Здесь скролла нет
Здесь скролла нет
Здесь скролла нет</div>
    
<div class="block">Здесь вертикального сколла тоже нет!
Здесь вертикального сколла тоже нет!
Здесь вертикального сколла тоже нет!
Здесь вертикального сколла тоже нет!
Здесь вертикального сколла тоже нет!
Здесь вертикального сколла тоже нет!
Здесь вертикального сколла тоже нет!
Здесь вертикального сколла тоже нет!
Здесь вертикального сколла тоже нет!
Здесь вертикального сколла тоже нет!
Здесь вертикального сколла тоже нет!
Здесь вертикального сколла тоже нет!
Здесь вертикального сколла тоже нет!
Здесь вертикального сколла тоже нет!</div>

<div class="block">Здесь вертикального скролла нет, поскольку max-height не превышен. Здесь вертикального скролла нет, поскольку max-height не превышен. Здесь вертикального скролла нет, поскольку max-height не превышен. Здесь вертикального скролла нет, поскольку max-height не превышен.
Здесь вертикального скролла нет, поскольку max-height не превышен. Здесь вертикального скролла нет, поскольку max-height не превышен. Здесь вертикального скролла нет, поскольку max-height не превышен. Здесь вертикального скролла нет, поскольку max-height не превышен. 
Здесь вертикального скролла нет, поскольку max-height не превышен. Здесь вертикального скролла нет, поскольку max-height не превышен. Здесь вертикального скролла нет, поскольку max-height не превышен. Здесь вертикального скролла нет, поскольку max-height не превышен.</div>

<div class="block">Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена.
Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена.
Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена.
Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена.
Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена.
Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена.
Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена.
Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена.
Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена.
Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена.
Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена.
Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена.
Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена.
Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена.
Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена.
Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена. Здесь вертикальный скролл есть, поскольку есть горизонтальный и максимальная высота превышена.</div>

Решение с использованием js не требуется, поскольку я сам могу его реализовать.

Кроссбраузерность не требуется. Также интересуют варианты, которые должны работать в соответствии со стандартом, но ещё не реализованы браузерами.

css css3
Источник: Stack Overflow на русском

Ответы

Ответов пока нет.