4 ms·

Yet another site falls victim to CSSWG’s absolutely asinine, entirely indefensible idea to make centered flexbox items in a too-small container clip and become

Yet another site falls victim to CSSWG’s absolutely asinine, entirely indefensible idea to make centered flexbox items in a too-small container clip and become completely inaccessible on the left side. Anyone who says flexbox “solved” centering hasn’t been paying attention. It blows my mind that this is the “best” (or at least most ubiquitous) layout engine in existence. Edit: to be more constructive, can anyone offer the OP a concise, CSS-only, diff that would fix the mobile issue without changing the DOM structure or layout on larger screens? It might be possible with a min-width: fit-content, but I have no development setup available at the moment.

FireInsight 3y ago
`flex-wrap: wrap;` and maybe, if you want, a `min-width` on the boxes themselves
- deleted 3y ago
  [deleted]
- basil-rash 3y ago
  Wrapping is undesired, the linear presentation is critical here. And the box is the screen in this case, on a mobile one the highest order buttons are missing. It’s sad that this had been up for so long with no real solutions. A genuine failure of the CSSWG.
  - FireInsight 3y ago
    You can't have >x of reasonably sized and spaced boxes on a screen horizontally without wrapping, regardless of layout engine. Besides, wrapping can be done presentationally while keeping the linearity. In this case, I'd probably switch to an automatic grid layout with equal size boxes regardless of content size. Then it could neatly wrap into multiple rows while keeping the boxes at a constrained size.
    - basil-rash 3y ago
      Yes you can, it’s called scrolling. And the items on the right of the screen are indeed accessible via scrolling, it’s the items on the left of the screen that are entirely inaccesible. There is no possible justification for this design, it’s pure slop. (CSSWG’s design, not this site which is hamstringed by their incompetence)

FireInsight 3y ago

`flex-wrap: wrap;` and maybe, if you want, a `min-width` on the boxes themselves

deleted 3y ago
[deleted]
basil-rash 3y ago
Wrapping is undesired, the linear presentation is critical here. And the box is the screen in this case, on a mobile one the highest order buttons are missing. It’s sad that this had been up for so long with no real solutions. A genuine failure of the CSSWG.
- FireInsight 3y ago
  You can't have >x of reasonably sized and spaced boxes on a screen horizontally without wrapping, regardless of layout engine. Besides, wrapping can be done presentationally while keeping the linearity. In this case, I'd probably switch to an automatic grid layout with equal size boxes regardless of content size. Then it could neatly wrap into multiple rows while keeping the boxes at a constrained size.
  - basil-rash 3y ago
    Yes you can, it’s called scrolling. And the items on the right of the screen are indeed accessible via scrolling, it’s the items on the left of the screen that are entirely inaccesible. There is no possible justification for this design, it’s pure slop. (CSSWG’s design, not this site which is hamstringed by their incompetence)