Kind wird nicht erweitert, wenn der Elternteil die Mindesthöhe hat

Question

Ich kann nicht scheinen, Min-Höhe Arbeit zu machen. Das Hauptproblem ist, dass mein Kind nicht die Größe des Elternteils bekommt und somit seine eigene Größe nicht festlegt. Wie kann ich das beheben?

#middle_Wrapper { 
 
    width: 100%; 
 
    min-height: 85vh; 
 
    max-height: 500%; 
 
    height: auto; 
 
} 
 

 
#main { 
 
    width: 90%; 
 
    height: 100%; 
 
    background-color: red; 
 
    opacity: 0.2; 
 
    position: relative; 
 
}

<div id="middle_Wrapper"> 
 
    <main id="main"> 
 
    test 
 
    </main> 
 
</div>

Answer 1

Fügen Sie einfach CSS, Sie verwenden %, damit es in vh ändern.

#main { 
    height: 100vh; 
} 

#middle_Wrapper { 
 
    width: 100%; 
 
    min-height: 50vh; 
 
    max-height: 500%; 
 
    height: auto; 
 
} 
 

 
#main { 
 
    width: 90%; 
 
    height: 100vh; 
 
    background-color: red; 
 
    opacity: 0.2; 
 
    position: relative; 
 
}

<div id="middle_Wrapper"> 
 
    <main id="main"> 
 
    test 
 
    </main> 
 
</div>

Answer 2

ändern height : auto zu height : 0

#middle_Wrapper { 
 
    width: 100%; 
 
    min-height: 50vh; 
 
    max-height: 500%; 
 
    height: 0; /* change this line */ 
 
} 
 

 
#main { 
 
    width: 90%; 
 
    height: 100%; 
 
    background-color: red; 
 
    opacity: 0.2; 
 
    position: relative; 
 
}

<div id="middle_Wrapper"> 
 
    <main id="main"> 
 
    test 
 
    </main> 
 
</div>