[nadmuchane_jaja]

#webdev #css

Jest tu ktoś z #webdev ? Dawno nie rzeźbiłem w gównie zwanym #css, a potrzebuję zrobić na szybko taką formatkę:

Dwa DIVy obok siebie w kontenerze nadrzędnym. Lewy div ma wysokość automatycznie dopasowywać do kontenera nadrzędnego, ale go nie rozpychać bo ma 'overflow hidden', natomiast prawy div się 'rozpycha', czyli zmienia rozmiar dynamicznie w zależności od załadowanej zawartości.

Upraszczając: W lewym divie jest np. lista dokumentów, dosyć długa, scrollowana i chcę, aby zawsze miała 100% diva nadrzędnego, a 'jej wypełnienie' było overflow: hidden. Drugi div natomiast pokazuje cały dokument/zdjęcie i rozpycha kontener nadrzędny dynamicznie regulując wysokość całej struktury :D

Obędzie się bez JS? :D

[blackredwhite]

@nadmuchane_jaja: flex

[CancerLight]

@nadmuchane_jaja

Obędzie się bez js, to zależy czy przy zmianie dokumentu ma się ładować cała strona, czy tylko div

[nadmuchane_jaja]

@CancerLight: @blackredwhite: jeżeli chodzi Wam o align-self: stretch to nie bardzo :/ bo w przypadku nieokreślenia wysokości lewego diva on i tak rozepchnie mi nadrzędnego... muszę ograniczyć wysokość lewego diva, ale dynamicznie w zależności co znajduje się w prawym divie...

[jeffery]

@nadmuchane_jaja Tutaj masz kod:

`

.container {
display: flex;
width: 100%;

}

.left {
flex: 1;
background-color: #4444dd;
}

.left-wrapper {
position: relative;
height: 100%;
}

.left-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: scroll;
}

.right {
flex: 4;
background-color: #44dd44;
}


aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer

[Phatee]

ABC


CDE


.container {
width:100%;
display:flex;
justify-columns:space-between;
align-items:stretch;
background-color:blue;
height:100vh;

}
.container .col-left {
flex-basis:0;
flex-grow:1;
background-color:green;
}
.container .col-right {
flex-basis:0;
flex-grow:9;
background-color:red;
}

[nadmuchane_jaja]

@jeffery: @Phatee: dziękuję, poradziłem sobie jednak JS ;) mam na szczęście (z innych funkcji) opcję zdarzenia i dodałem po prostu (na przykładzie obrazu):

var imagesize = document.getElementById('imagegallery' + loadedImageId);
$("#gallery-thumbnails").animate({maxHeight: imagesize.clientHeight});

Myślałem, że po prostu jest jakiś gotowy mechanizm i bez takich dziwactw się obejdzie. Pewnie dałoby radę, ale musiałbym przebudować połowę interfejsu, aby flex zadziałał :) a tego mi się nie chce :

Pozdrawiam