0

I have created a codepen to illustrate my problem: https://codepen.io/chasenbettinger/pen/JBozOL

If the row cannot hold the box and thus it moves it to a new row, I am trying to get the size of that box to be the same size as the items on the top row. In other words, I want the responsiveness of flex-grow, but I do not want the div to expand the entire space of the div if it is on a new line. If I didn't use the max-width property, the two boxes on the bottom would expand the entire size of the div.

Am I approaching this problem the wrong way?

Chasen Bettinger
  • 7,194
  • 2
  • 14
  • 30
  • I would say not possible without media query or a lot of hack ... there is a duplicate for this with some workarounds but not able to find it – Temani Afif Jul 11 '18 at 23:05
  • @TemaniAfif Ya.. that's what I was thinking. That's why I asked if I was approaching the problem correctly. Maybe this is a better use for grid? – Chasen Bettinger Jul 11 '18 at 23:11
  • well with grid you will be obliged to define a width value and you can also do this with flex – Temani Afif Jul 11 '18 at 23:15
  • @TemaniAfif if you don't mind me asking; how would you solve this problem? Is it best to the let items grow within their container? – Chasen Bettinger Jul 11 '18 at 23:24
  • well, I cannot tell you if it's the best or not, but to solve this I would first try media query and maybe use some hack with pseudo element to reduce the effect : https://jsfiddle.net/pquoLt07/ .. then you play with other value to have what you need – Temani Afif Jul 11 '18 at 23:30

0 Answers0