[jaredcwhite]

CSS has been hard. Modern CSS is amazingly more straightforward. As others have pointed out here, this is a problem of trying to apply new functionality (and more modern CSS) to a legacy codebase. Obviously there will be weird issues there. If the entire parent component had been designed from top to bottom using flex/grid mechanics, I doubt a problem like this would have presented itself after the fact.

[SteelWo1f]

You are absolutely right here. This problem arose because the surrounding code was much older. I would have liked to reformat it, but that would have been a huge lift compared to what I was trying to achieve.

[epgui]

That's been my experience as well... Any CSS issue that was not immediately obvious, in my experience, has always had more to do with insane markup and javascript than with css.

Just to give a fictitious example (inspired by real events)... I wouldn't really expect a Label react component to be made up of 26 nested html elements, 80% of which coming from third party libraries. Stuff like that can be hard to style, but that's just because there's inappropriate abstractions involved.

[lisasays]

"Modern CSS" defined as ... what, precisely?

Keyword searches seem to pull up an unstructured soup of random essays and 'tips-n-tricks' type articles.

[xboxnolifes]

To me, that means flexbox and grids. All of my past css formatting issues are solved with those two things.