v2.5.2
Giriş yap

CSS3 Flex Konumlandırma Sorunu

ugurozgen
413 defa görüntülendi ve 1 kişi tarafından değerlendirildi

Tamamen flex ile oluşturduğum bir yapı var. Görselleri aşağıda paylaştım. Listeleme yapılan yerde bir sorunum var.

Paylaştığım ilk görselde herşey normal gözüküyor. Ama liste aşağı doğru uzayınca en alttaki form alanıda alta kayıyor. Aslında böyle olmaması için düzenleme yapmıştım ama sanırım kapsayıcı elemanlardan kaynaklı bir sorun var tam çözemedim.

Normal görsel:

image

Liste çoğalınca bozuluyor:

image

Bu kısmın kodlarını paylaşıyorum.

.content {
    flex: 1;
    background: #444558;
    display: flex;
    flex-direction: column;

    &-body {
        overflow: auto;
        flex: 1;
        padding: 1rem;
    }

    &-action {
        padding: 1rem;
        display: flex;
        gap: 1rem;
    }
}

Siyah alan .content diye geçiyor ve içinde listeleri kapsayan .content-body ve en altta form alanı olan .content-action alanı var.

Bu kodlar ile olmasını beklediğim şey listeleme alanının scroll olup alttaki form alanının sabit kalması.

Buna benzer yapılar daha önce yaptım çalışıyor ama burda ne hatam var anlamadım.

Bu arada bu .content alanını dışındada bir div daha var. Onunda kodları şöyle:

.wrapper {
    flex: 1;
    display: flex;
}

Sorun bundan kaynaklı olabilir ama çözemedim.

Şimdiden teşekkürler :)

Cevap yaz
Cevaplar (5)
akincankoc
1011 gün önce

action kısmına belirli bir yükseklik verip body'ne ise overflow-y:scroll verirsen sadece otomatik olarak içerisinde scroll sağlayabilirsin.

ugurozgen
1011 gün önce

@akincankoc sağolun hocam cevabınız bir fikir verdi. Tüm kapsayıcılara (html, body dahil) height:100% verdiğimde çözülüyor. Teşekkürler tüm cevap yazanlara :)

shichaz
1011 gün önce

Listeye maksimum yükseklik verirsen kendi içinde scroll yapılabilir.

ugurozgen
1011 gün önce

@rkamalper Scroll olmasını istediğim kısım zaten bu şekilde ama o da görünmüyor hiç bir şekilde.

&-body {
    overflow: auto;
    flex: 1;
    padding: 1rem;
}
erkamalper
1011 gün önce
overflow-y: scroll;

vermeyi denediniz mi formların bulunduğu kısma?