Altezza percentuale CSS quando il genitore ha altezza min/max

Question

So che quando si utilizza un'altezza percentuale su un elemento, la percentuale è la percentuale del suo genitore. Diciamo che vuoi che un bambino sia il 40% del genitore. Il genitore ha un massimo e un minimo di altezza assegnati, ma non ha un'altezza esplicita assegnata. Per esempio:

<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 due non apparirà. Quando cambi il css del suo genitore (div one) da questo max-height:50% a questo: height:50% div due apparirà perché sa qual è l'altezza del suo genitore perché è esplicitamente definito. La mia domanda è c'è un modo per rendere div due appaiono durante l'utilizzo di (min/max)-height e non height

Ecco un fiddle

Answer 1

Se non specificato altezza, o si specifica l'altezza da percetage ma non dare il suo parenet una specifica altezza, l'elemento del blocco verrà ridimensionato all'altezza del contenuto (0px per #two in questo caso).

Longer Explain

Quindi, solo impostare altezza min-height, perché l'altezza DOM partirà da min-height senza specificare altezza.

jsFiddle

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

Answer 2

check this out, non trovi un piccolo pezzo. Supponiamo di voler impostare l'altezza di #one rispetto a #container e #two rispetto a # uno (è quello che penso che tu stia andando). Abbiamo bisogno di una dichiarazione di altezza di #one per ottenere un'altezza da #two. Il trucco qui è di impostare un'altezza massima, un'altezza minima e un'altezza per l'elemento, dandogli così un'altezza che è vincolata dal minimo e dal massimo.

Prova questa 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> 

L'altezza non è mai raggiunto perché è vincolato dalla max-height, ma senza dichiararlo l'altezza è l'altezza: auto, che è sommerso. Ho impostato l'altezza di #container come 74vh per rendere il tutto reattivo in base alla dimensione del viewport.