6
AlgoRythm
12h

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))

Comments
  • 4
    Sometimes wonder if all the times I got css right was sheer luck
  • 5
  • 1
    Skill issue
  • 2
    css is the one thing I never mastered
  • 0
    Feels good to be doing backend and skipping over frontend issues.

    Don't people just shadcn everything nowadays?
  • 2
    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.
  • 1
    @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!
  • 0
    @AlgoRythm you're welcome. If you don't quite understand it, ask chatgpt to explain it to you!
  • 0
    @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.
Add Comment