Высота процента CSS, когда родитель имеет минимальную/максимальную высоту

Question

Я знаю, что когда вы используете процентную высоту элемента, этот процент является процентом его родителя. Предположим, что вы хотите, чтобы ребенок был 40% его родителя. У родителя назначена максимальная и минимальная высота, но у нее нет назначенной высоты. Например:

<div id="container"> 
    <div id="one"> 
    <div id="two"></div> 
    </div> 
</div> 

Css

#container{ 
    height: 500px; 
    background: yellow; 
} 
#one{ 
    background: red; 
    min-height:100px; 
    max-height: 50%; 
    padding: 10px; 
} 
#two{ 
    background: blue; 
    height: 40%; 
} 

Div два не появится. Когда вы меняете css своего родителя (div one) из этого max-height:50% на это: height:50% div two появится, потому что он знает, какова высота его родителя, потому что он явно определен. Мой вопрос, есть ли способ сделать DIV два появляются при использовании (min/max)-height и не height

Вот fiddle

Answer 1

Если вы не указать высоту, или указать высоту percetage, но не давая его parenet указать высоту, элемент блока будет изменять размер до высоты содержимого (0px для #two в этом случае).

Longer Explain

Так просто установить высоту мин-высоту, потому что высота DOM будет начинаться с мин-высота без указания высоты.

jsFiddle

#one{ 
    background: red; 
    min-height: 100px; 
    height: 100px; 
    max-height: 50%; 
    padding: 10px; 
} 

Answer 2

Проверьте это, вы упускаете один маленький кусочек. Предположим, вы хотите установить высоту #one по сравнению с #container и #two по сравнению с #one (вот что я думаю, что вы собираетесь). Нам нужна инструкция высоты #one, чтобы получить высоту от #two. Трюк здесь заключается в том, чтобы установить максимальную высоту, минимальную высоту и высоту элемента, тем самым давая ему высоту, которая ограничена минимальным и максимальным.

Попробуйте CSS:

<style> 
#container{ 
    height: 74vh; 
    background: yellow; 
} 
#one{ 
    background: red; 
    min-height:100px; 
    max-height: 50%; 
    height: 100%; 
    padding: 10px; 
} 
#two{ 
    background: blue; 
    height: 40%; 
} 
</style> 

Высота никогда не достигается, потому что она ограничена максимальной высотой, но без объявления высоты это высота: авто, которая необъявленная. Я установил высоту #container как 74vh, чтобы сделать все это отзывчивым в соответствии с размером окна просмотра.