max-height İçinde max-height Kullanımı

Merhaba PT'liler.

.container divimizin yüksekliği otomatik ama en yüksek hali ekranın %90'ı olmalı.

.container divimizin içinde bulunan .item divi'de otomatik yükseklikte fakat en fazla .container divimizin boyutu olmalı ve overflow-y: auto ile scroll edebilelim.

Aşağıdaki örnek kodda .item divimizin max-height değerini px olarak girdiğimizde sonuca ulaşıyoruz fakat % olarak girdiğimizde sonuç alamıyorum.

HTML Kodları

<div class="container">
    <div class="item">
        İÇERİK
    </div>
</div>

CSS Kodları

.container {
    max-height: 90%;
}

.item {
    max-height: 500px;
    overflow-y: auto;
}

ikincide tekrar max-heşght kullanırsan, zaten önceden max yükseliği belirttiğin için container %90 olsa bile item clasının tanımı maksimum 500px olur % ile sayfayı doldurmamasının sebebi ise içerisindeki içeriğin boyutundan kaynaklanıyor eğer içerisinde ekranın 3 katı bir içerik olsa maks olarak tanımladığın % değerlerine erişip kısıtlardı örneğin %90 ise 3 katı değil %90ı kadar olurdu yani bu durumda sadece içerik max-heighti geçiyorsa max-height görüntü uygulardı bu yüzde min kullanmalısın
<style>
.container {

max-height: 90%;
background-color:

}

.item {

min-height: 100%;
overflow-y: auto;
background-color: red;

}
</style>
<div class="container">

<div class="item">
    
</div>

</div>