Earlier quoted context omitted.
It's not that it's difficult, really, but the tools are incredibly underpowered. For example: * How do you vertically center an arbitrary element inside another where you don't know the height of any of them? Answer: The only reliable way is via "display: table-cell". It has several annoying limitations. * How do you ensure that several horizontally adjacent boxes fill the width of the container and are all of equal…
1. Flexbox, through the align-items property. 2. Flexbox, setting flex: 1; to the boxes. Can be done vertically or horizontally. 3. Flexbox, setting flex: 1; to boxes. Setting a min-width to a flex-item takes precedence so it will be honored. 4. You got me. I remember hearing talk about an aspect-ratio property. I'm not sure if the object-fit/object-position properties get the job done. The hacks will have to continu…
Re #5, I managed to leave out the important part. I mentioned tooltip because I was going to write: ...where the element is placed _above_ another arbitrary element. This is impossible, and raises problems such as escaping "overflow: hidden" and what if the position goes beyond the viewport.
6: In theory, but it is apparently not supported by all browsers.
7: Not the parent, but an arbitrary element. For example, let's say I have an input field. I want to show an autocompletion dropdown box. The box should be at least the width of the input field. It must be absolutely positioned. The parent container of the input field may have "overflow: hidden", too.
(Overflow handling is really a broken concept that screws up a lot of CSS, because there is no way to escape it. Z-index is another awful one.)
Last pet-peeve: Floats depend on their order in the DOM. A float-right element must be placed before any non-float element in order to position itself vertically to be aligned with the parent box.