Flexbugs: justify-content: flex-end and overflow: auto don't play along

[KittyGiraudel]

Related tweet: https://twitter.com/HugoGiraudel/status/601740314282430464.
Relevant demo: http://codepen.io/HugoGiraudel/pen/EjgeaY/.

[philipwalton]

Did you have a workaround in mind for this?

[KittyGiraudel]

Nope. :(

[philipwalton]

No worries, I think it's good to have these sorts of bugs documented here in case others have the same issue, but I'm going to reserve the "official" list in the README for common issues with known workarounds.

Feel free to reopen if you have a workaround suggestion or get new information from FF.

[lyziane]

One year later... Any solution for this?

[philipwalton]

I think this proposed workaround might solve it, but I haven't had enough of a change to look into it yet:
https://github.com/philipwalton/flexbugs/issues/136#issuecomment-199641030

[lyziane]

If anyone needs a solution to this problem:
In my case instead of using "justify-content: flex-end", I did some trick by adding "direction: rtl" to the wrapper and then reversing it back to "ltr" inside the items

[patricio-ezequiel-hondagneu-roig]

I found a workaround for this. Use justify-content: flex-start (or whatever, really) and add a **selector** > :first-child { margin-top: auto } so it pushes the rest of the items to the bottom of the flex container.

[baig]

@patoezequiel Thank you! You saved me from wasting a lot of hours. This workaround still works.

[patricio-ezequiel-hondagneu-roig]

@baig you're welcome!

[qalqi]

flex-direction: row-reverse;
overflow: auto;

https://stackoverflow.com/questions/47372148/overflow-auto-not-working-with-justify-content-flex-end