0

I have a case where I'm required to use flexbox (and not css grid).

The parent can have multiple widths,
but the children should be:

  • 100% width IF they are wrapped
  • max-width 200px IF they are not wrapped.

When the parent is eg. 300px, I'm not sure how to achieve this. (Without JS)

Here's the codepen with the problem: https://codepen.io/mesqueeb/pen/PMqoEa

enter image description here

mesqueeb
  • 5,277
  • 5
  • 44
  • 77
  • consider media query – Temani Afif Jul 20 '19 at 08:01
  • @TemaniAfif No I can't, because the parent div width is not related to the screen width. : S – mesqueeb Jul 20 '19 at 09:02
  • 1
    CSS has no concept of wrapping. So child elements need something to tell them what to do when they wrap. That's where media queries or JS come in. More in the duplicate. – Michael Benjamin Jul 20 '19 at 11:36
  • @Michael_B while I can see there is a similarity, it's not really a duplicate, because that question is more about the width of the children which is different depending on the contents. My case doesn't matter what the child items have inside of them, text or no text. I need the children to stretch to the width of the parent, unless if they fit on one line. But I guess the answer is "this is not possible". – mesqueeb Jul 20 '19 at 11:49
  • Yes, but the child's behavior is tied to a wrap. And the parent container has no idea when its children wrap. That's why I felt the other post addressed this issue. However, feel free to vote to reopen if you disagree. And, yes, with CSS and no media queries, your layout is not possible, to the best of my knowledge. – Michael Benjamin Jul 20 '19 at 11:53
  • 1
    @Michael_B That's ok, I guess I have my answer. :P Thanks for the insights either way! – mesqueeb Jul 20 '19 at 11:58

0 Answers0