Вложенная минимальная высота не работает

Question

У меня фиксированная размерная область с фиксированными размерами с полосами прокрутки, содержащими контент с переменным размером.

Теперь мне нужно обернуть содержимое в два div, которые по крайней мере такие же большие, как и площадь, но расширяются, чтобы соответствовать содержимому.

<div id="area"> 
    <div id="outer"> 
     <div id="inner"> 
      <div id="content">content</div> 
     </div> 
    </div> 
</div> 

Требования:

1. Они должны расширяться, поэтому их высота должна быть установлена ​​на автоматический режим.
2. Для того, чтобы заполнить контейнер их минимальный размер должен быть 100%

Поэтому я попытался следующие CSS (полный пример в JsFiddle):

#area { 
    /* defined outside */ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    padding: 20px; 
    box-sizing: border-box; 
    overflow: scroll; 
} 

#outer, #inner { 
    min-width: 100%; 
    min-height: 100%; 
} 

Это делает работу для #outer но не имеет эффект на #inner. Как я могу это исправить?

ОБНОВЛЕНИЕ Меня интересует только Chrome, если это помогает.

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

UPDATE 2

Так я проанализированных CSS спецификации и пришли к выводу, что мои требования не могут быть удовлетворены:

1. Для мин-высота для работы он должен быть абсолютно позиционирован или это содержащий высота блока не должна зависеть от высоты содержимого CSS2(10.7)

2. мне нужно Autosizing так ни #inner, ни #outer может быть абсолютно позиционирован. Это означает, что , содержащий блок, должен иметь указанную высоту.

3. Поэтому #outer не может содержать блок #inner. Это оставляет мне #area.

4. В соответствии с CSS2(10.1) это возможно только для #inner, когда элемент расположен абсолютно, что конфликтует с моей целью.

Answer 1

#inner используя высоту в процентах означает, что она базируется на высоте своего родителя #outer, который не указан в качестве точного % или px:

#area { 
    position: absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    padding: 20px; 
    box-sizing: border-box; 
} 

#outer,#inner { 
    min-width: 100%; 
    min-height: 100%; 
} 

#outer { 
    height:100%; 
    overflow: auto; 
} 

jsFiddle provided here, который показывает цветом, что #inner Получает полная высота #outer.

Я также принял несколько свобод. Я установил ваш #area CSS для более правильной установки высоты и ширины, и я сделал ваш прокручивающий компонент #outer вместо #area, так как #inner будет содержимым, которое переполняет его.

Answer 2

Если изменить min-height: 100%; к height: 100%; он будет работать.

Answer 3

#outer, #inner { 
    height:100%; 
    min-width: 100%; 
} 

Answer 4

Вашей мин-высота должна быть основана на px не в % по крайней мере вот как я моя проблема исправлена. просто используйте разумные pixel-height

Таким образом, внутренняя всегда будет такой же большой, как и внешняя.

Answer 5

Я не уверен, что правильно понял вопрос, что должно расширять внутреннее или содержание?

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

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

#outer { 
background: red; 
position: static; 
min-width: 100%; 
min-height: 100%; 
} 
#inner { 
background: blue; 
position: absolute; 
min-width: 100%; 
min-height: 100%; 
height:100%; 
overflow:auto; 
} 
#content { 
height: 200px; 
background-color:yellow; 
overflow:auto; 
} 

example here - with content, which scrolls