CSS will not let you do this, even with flexbox.
Am I misinterpreting what you mean?
Yes. The red one should be a rectangle and the green one a square. In your case the red one is also a square.
FlexBox always felt like it was a direct response to a few specific cases rather than a generalized gain in flexibility.
Part of that could just be me. I don't really care how it works, I just figure out the smallest amount possible to get what I'm doing to work and leave it at that. Maybe it's the fact that there are many ways to do very similar things, e.g. I can access an element by id or class or another attribute and so I just really need to find one that works and move on to other more "important" parts of the app.
I do also have a great memory[4] for tiny, usually-trivial bits of data like: "no matter the z-index of an element, it cannot overlap an absolutely positioned element (with z-index greater than 0) unless it is also absolutely positioned". It doesn't feel like it's any different than remembering various bits of syntax or APIs, but maybe that's a more difficult thing for some people to remember than others - IANAN[3].
Give Code School a shot (go through the whole CSS Cross-Country course). You can get a 2-day free trial here: https://www.codeschool.com/hall_passes/213f3fedb6b9/claim_sh....
[0] I actually started writing this comment ~15 times before settling on an opening.
[1] It's mostly just abbreviations now: I don't think or speak (or type) "background-color", I just think "bgc<tab>". This is due to the fantastic Emmet plugin for Sublime: http://docs.emmet.io/css-abbreviations/
[2] https://www.codeschool.com/
[2a] You might be specifically interested in https://www.codeschool.com/courses/css-cross-country
[2b] I also have an affiliate link if you're feeling generous: http://mbsy.co/7djLz
[3] I am not a neurologist
[4] Terrible short-term memory though - my wife constantly complains about how I can remember "all those coding things" but can't recall what she asked me to do <30 seconds ago.
* You want to overlay a <div> to the bottom write of a container. You can use "position: absolute; bottom: 0; right: 0", but that puts it at the bottom of the page instead. You have to add "position: relative" to the container. Understanding why you'd need this property means understanding implementation details. Which defeats the purpose of being a declarative language.
* You want to float a <aside> to the right of an <article> another. Just add "float: right", to the <aside> right? Whoops, that doesn't work. You'll need to add "overflow: hidden" to the <article> as well. Why should the overflow mode (which really should affect a node's contents) affect the layout of a sibling?
* You have a <header> element which extends the width of a content column. You want it to stay fixed within the page so give it "position: fixed". Now all of a sudden it's forgotten how wide it should be and shrinks to the width of it's content.
* You have a second <header> element with "width: 100%". You make it fixed too. Instead of retaining it's original width -- or shrinking like the other header -- it extends from its original position on the x-axis off the side of the screen so that it's 100% of the width of the page.
Sure, you can learn all of these special rules, but that isn't really a productive use of your time. I work with React a lot, so the approach we use is to create generic layout components that can do all of this stuff in a consistent way.
Could you perhaps show some examples of websites that you have built (or send me a message privately if you're not comfortable with that)?
One explanation I can think of is that the more willing you are to stray from the 'separation of content from presentation' rule, the easier things are. Many of the CSS problems I run into would be much easier to solve if I could allow my markup to be informed by the styling, rather than the other way around.
Another possibility is that some of the people who 'like' CSS are also the ones designing the site. They might design with their CSS knowledge as a basis.
In contrast, many of us who struggle with CSS probably struggle more because 1) we try to keep the html 'pure', and 2) we are handed designs by others or don't let ourselves be constrained by our knowledge of CSS.
Just some thoughts...
FYI: this is incorrect. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Under...
This happens to me all the time. I thought about maybe writing an app that records all the time and then will play you back the last 30 seconds when you press a button.
Probably too resource intensive to be usable though.
This is exactly how I work with CSS too. Not surprisingly, it's my least favorite aspect of web development.
The solution is to stay DRY by applying OOCSS/SMACSS/BEM concepts using Sass/Less.