Предельный дисплей: высота таблицы/строки ячейки, когда высота динамическая

Question

Мне нужно сделать прокрутку div при переполнении содержимого. Ловушка заключается в том, что в случае компоновки div является частью системы display: table/table-row.

Demo

В нижней боковой панели контейнера необходимо разрешить прокрутку, когда содержание превышает высоту. Проблема заключается в том, что - с этим типом макета - CSS не имеет возможности заблокировать нижний div до динамически определенной высоты его родителя (.holder). Это должно было либо быть% высоты, либо просто на 100% высоты его родителя, которая слишком велика.

Моя цель - разрешить это с помощью чистого CSS, поэтому мы можем избежать запуска javascript, когда что-то изменит высоту элементов боковой панели.

.wrapper-page { position: absolute; top: 38px; bottom: 10px; left: 10px; right: 10px; overflow: hidden; } 
.sidebar { width: 25%; height: 100%; } 

.holder { width: 100%; height: 100%; display: table; table-layout: fixed } 
.holder > div:first-child { height: 25%; max-height: 25%; } 
.holder > div { display: table-row; table-layout: fixed } 

Из-за этого макета, только sidebar будет правильно прокрутки, если мы используем overflow-y: scroll - но прокручивает всю боковую панель. .holder > div:last-child - это то, что нужно прокрутить.

<div class="wrapper-page"> 
    <div class="sidebar"> 
     <div class="holder"> 
      <div> 
       box one<br> 
      </div> 
      <div> 
       box two<br> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

Я это работает локально с помощью:

div { 
    outline: 1px solid blue; 
} 
.wrapper-page { 
    position: absolute; 
    top: 38px; 
    bottom: 10px; 
    left: 10px; 
    right: 10px; 
    overflow: hidden; 
} 
.sidebar { 
    width: 25%; 
    height: 100% 
} 
.holder { 
    width: 100%; 
    overflow: hidden; 
} 
.holder > div { 
    overflow-y: scroll; 
} 
.holder > div:first-child { 
    height: 25%; 
} 
.holder > div:last-child { 
    height: 75%; 
} 

Я попытался наклеивать обратно в CodePen, но он не работает в своей виртуальной среде. Однако он работает в плоском файле HTML. К сожалению, я не знаю, будет ли это работать для вас, кроме как опубликовать его как возможный ответ для вас.

Объяснение: Предостережение здесь было фактически самой структурой таблицы. Вам придется использовать оставшийся размер по высоте. Это похоже на компромисс; no-JS требует явного CSS, где, как и в JS, вы можете быть более гибкими с CSS.

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

.wrapper-page.hide-upper .holder > div:first-child { display: none !important; } 
.wrapper-page.hide-upper .holder > div:last-child { height: 100% !important; } 

Это не может быть 100%, что вы ищете, но на основе вашего описания того, что вы пытаетесь достичь, похоже, что он будет делать то же самое.