CSS problem, child se ne obazire na parent max-height

Problematika je sljedeća:
Imamo neki box i u njemu head, content i footer.
Želimo da se box rasteže prema visini contenta (head i footer su fiksni) …no isto tako želimo limitirati maximalnu visinu boxa u ovisnosti njegovog parenta. Kad se box nađe u limitu, očekujemo od contetna da upali vertikalni scroll bar.

Evo svih elemenata ovdje Edit fiddle - JSFiddle - Code Playground …jel zna tko s njima na zelenu granu ? :smile:

Možete primjetiti zakomentirani atribut height unutar .box-a
Ako se to odkomentira, onda se stvar dobro ponaša za visine kad je očekivan scroll bar na contentu, no onda ne šljaka za manje visine.
Isto vrijedi i obratno, ako se zakomentirana ta linija…onda stvar šljaka dobro za manje visine…ali ne i kad je očekivan scroll bar.

Jel ima neko elegantno rješenje?

Ne znam jesam li razumio sve dobro ali evo ti primjer pa mi reci da li nešto na ovaj đir želiš.
Poigraj se s veličinom prozora pa vidi kako se ponaša.

1 Like

Huh, to je to…al moram priznat ne kužim pola atributa xd.

Proučit ću malo ovo flex-basis, flex-shrink, i flex-direction…pa ću valjda biti malo pametniji. Ako što ne skužim…vratit ću se zagnjaviti te još malo :slight_smile:

Hvala puno!


Guglaj css flexbox ima dosta o njemu kako funkcionira.