[css-sizing-3] Illustrate the Sizing Spec

[fantasai]

The new sizing keywords are kindof important for authors, especially now that Flex and Grid make them more useful. It would be nice for the spec to have some illustrations.

Needed SVG diagrams:

• [x] size (e.g. a rectangle with arrows representing block size, inline size, width, height -- maybe abbreviated version of these ascii diagrams
• [x] inner size
• [x] outer size
• [x] stretch-fit size
• [ ] max-content size
• [ ] min-content size
• [ ] fit-content size

(Aside from the first one, “size”, illustrating these for just the inline axis should be sufficient.)

[meyerweb]

I’m pretty sure I can put together inner size and outer size diagrams in short order. I’d most likely use https://meyerweb.github.io/csstdg4figs/07-basic-visual-formatting/content-area-and-surroundings.html as a starting point for the appearance, unless you have existing box model diagrams you’d rather they emulate.

The rest I’m not sure about, since I’m not clear exactly what’s to be illustrated and in what way. (For the first, size, knowing which parts of the diagram are crucial and which are not is key.) I’m happy to turn pen sketches into SVG, if that’s easy to do. Or point to definitions and supporting explanations, and I can do my best to work it out on my own.

[andresgalante]

I am sure @meyerweb will do a better job than me at it. But if you guys don't have time for this I can try doing it.

@fantasai if you can draw your ideas on a napkin I will have them done in no time.

[meyerweb]

Attached are stabs at inner size and outer size. Should there also be vertical-axis labels? (Pardon me, cross-axis labels.) inner-outer-sizes.zip