Trying to get flex container overflow to scroll is like funking pulling teeth. I've worked with flex containers for 5+ years straight and it still makes me want to kill myself.

Here's the tools you need to make a flex container scroll. God help you if it's nested more than 2-3 containers from the root. You apply these randomly until you see the scroll bar in the correct place.

min-height: 0px;
min-height: min-content;
overflow: auto;
overflow: hidden;
display: flex;
flex: 1;

(Real pro tip: you can place a "dummy" element inside the container you wish to make scroll. The dummy element should be a huge size, like 10k pixels. This allows you to see what containers up the DOM tree are still not correct (any container that is 10,000px is WRONG. Work your way down the DOM tree and fix fix fix))

Sometimes wonder if all the times I got css right was sheer luck

@TeachMeCode it was

Skill issue

css is the one thing I never mastered

Exactly how I feel about css.
I‘m not as experienced as you though and I‘m glad that I don’t have to deal with it anymore.

@kiki on the CSS spec writer’s part maybe. How could you possibly specify something with such unintuitive overflow behavior? We were *this* close to a perfect layout!

@AlgoRythm you're welcome. If you don't quite understand it, ask chatgpt to explain it to you!

@kiki see this is the point. Weird obscure crap that is needed for something relatively simple.
I know that it has a lot of legacy stuff and it has grown organically but it’s how it is.
If css would have been redesigned from 0 with current knowledge and requirements in mind, it could have been awesome. But it’s not.

@Lensflare to paraphrase Eric Naggum, "a programmer who don't understand CSS but tries to use it veers off the road into the forest will get out of his car and cut down each and every tree that blocks his progress, then drive a few meters and repeat the whole process.

Somehow my CSS barely contains CSS-specific things. It's mostly just information about UI that psobably looks the same in Swift, and would've looked the same should CSS be redesigned. For example, text alignment in buttons. Or the gap between elements. Or maximum width of an element.

The main problem with CSS is not the CSS itself, it's that arrogant devs think that this "non-language" doesn't deserve patience, or to be learned and understood.

I would argue that if you rush learning any language, especially if the alignment is not familiar to you (imperative vs declarative), you'll think it's shit.

@kiki I disagree.

For me, the main problem with CSS is actually its legacy.
I love the syntax but I hate the "std lib" for the lack of a better term. I hate the weird and inconsistent names and functions and what their semantics are.

@kiki learning css was a real unique experience because as you said, when you learn a new language and rush it, you'll find it shit, and you might be right, but css was different. I didn‘t try to rush it.
And it wasn’t the language itself that I disliked, as I said. It wasn’t about the syntax.
I was really annoyed and confused by the weird semantics of many many properties.
And that is like the opposite experience of when I learned something like JS.

@kiki I’ve seen that answer many times. Even yesterday, in fact, as it’s the thread with the most correct answers to try. It’s not a magic bullet, you need to mix and match all the suggested answers in that thread and knowing which solution to pick requires deep knowledge of both flex layouts and your own current DOM. Your oversimplification shows arrogance and disdain. Shame on you

@kiki furthermore, I never needed your fuckin answer. I didn’t say I was stuck or couldn’t fix my problem. I was able. All I said is it’s a pain in the ass, which it invariably is.