4 ms·

Funny that this doesn’t even mention the actual critical failure of CSS centering: data loss on all items overflowing to the left of the container. Items to the

Funny that this doesn’t even mention the actual critical failure of CSS centering: data loss on all items overflowing to the left of the container. Items to the right can be scrolled into view, but items to the left are entirely inaccessible.

hunter2_ 2y ago
Is that any worse than an inability to scroll up, vertically negative, from the initial scroll position?
- basil-rash 2y ago
  Yes, because content is almost never placed above the viewport. Do you have an example of that happening? But I suppose the complaint might be able to be generalized to all items past the start of a main-axis centered flex-box. Doesn’t make the failure more excusable.
Inviz 2y ago
margin: 0 auto; (or simply auto for two-axis centering) will not have that issue. For multiple things in line, gotta use :nth-child to apply margin-left: auto on first item in row, and margin-right: auto for last item. Finally you can allow container to grow with the contents.
- dumbo-octopus 2y ago
  `width: fit-content;` is a good tip. Still, it's annoying that the current behavior is the default. I was not able to get the nth child variants to work: <main> <div>A</div> <div>B</div> <div>C</div> <div>D</div> </main> main { display: flex; flex-direction: row; justify-content: center; /* width: fit-content; */ } div { min-width: 400px; height: 300px; background-color: wheat; margin: 4px; } div:nth-child(1){ margin-left: auto; } div:nth-last-child(1){ margin-right: auto; }
  - Inviz 2y ago
    Simply dont use justify-content in that case. https://codepen.io/inviz/pen/XWQxaOp https://codepen.io/inviz/pen/XWQxaOp
    - dumbo-octopus 2y ago
      Hm, that works well enough as a replacement for `center`, but not any of the `space-*` variants. But "min-width: fit-content" works nicely for all the cases I tried.
chrisjj 2y ago
It that failure really of CSS i.e. the spec?

hunter2_ 2y ago

Is that any worse than an inability to scroll up, vertically negative, from the initial scroll position?

basil-rash 2y ago
Yes, because content is almost never placed above the viewport. Do you have an example of that happening? But I suppose the complaint might be able to be generalized to all items past the start of a main-axis centered flex-box. Doesn’t make the failure more excusable.

Inviz 2y ago

margin: 0 auto; (or simply auto for two-axis centering) will not have that issue. For multiple things in line, gotta use :nth-child to apply margin-left: auto on first item in row, and margin-right: auto for last item. Finally you can allow container to grow with the contents.

dumbo-octopus 2y ago
`width: fit-content;` is a good tip. Still, it's annoying that the current behavior is the default. I was not able to get the nth child variants to work: <main> <div>A</div> <div>B</div> <div>C</div> <div>D</div> </main> main { display: flex; flex-direction: row; justify-content: center; /* width: fit-content; */ } div { min-width: 400px; height: 300px; background-color: wheat; margin: 4px; } div:nth-child(1){ margin-left: auto; } div:nth-last-child(1){ margin-right: auto; }
- Inviz 2y ago
  Simply dont use justify-content in that case. https://codepen.io/inviz/pen/XWQxaOp https://codepen.io/inviz/pen/XWQxaOp
  - dumbo-octopus 2y ago
    Hm, that works well enough as a replacement for `center`, but not any of the `space-*` variants. But "min-width: fit-content" works nicely for all the cases I tried.

chrisjj 2y ago

It that failure really of CSS i.e. the spec?