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

Я знаю, что, когда вы используете процентную высоту для элемента, процентная доля - это процент от его родительского. Скажем, что вы хотите, чтобы ребенок составлял 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 two не появится. Когда вы измените css своего родителя (div one) из этого max-height:50% на это: height:50% появится div two, потому что он знает, какова высота его родителя, потому что он явно определен. Мой вопрос заключается в том, как заставить div two появляться при использовании (min/max)-height, а не height

Вот fiddle

Ответ 1

Проверьте это, вам не хватает одной крошечной части. Предположим, вы хотите установить высоту #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>

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

Ответ 2

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

Более подробное объяснение

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

jsFiddle

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