I’m also wondering if for the first example the nowrap is helpful since, when I tried this with a lot of text, it unsurprisingly bleeds out of the container over to the adjacent cards e.g. with:

<div class=”card”><h2>Card</h2>
 <div>this is a very long piece of text that goes on and on and on and never seems to end to try out the white-space value;
 </div>
 </div>

Of course, not setting it may bleed below the card as well, so you have to account for that. But, I just think the real trick to achieving all this for the first example is the overflow-x auto with y hidden and making the cards inline-block.

For the flex-wrap one it absolutely IS needed. However, we can omit it since: Default value‎: ‎nowrap

But I like your explicit setting of this which is more intentional and will help other developers understand the code.

So, TLDR, as we need the nowrap for flexbox, do we really need to set it for the first example?

Again, thank you so much for posting these practical solutions and putting your time in to sharing with the community—I definitely enjoy getting things accomplished with less libraries and less lines of code :)