0

I have 4 buttons. As you can see they all have equal width and together they fill the whole container. Can I make flex items to prefer minimum width but still remain equal width without specifying particular dimensions? Any help appreciated.

enter image description here

Clarification: As you can see the longest labeled button has some space that can be cut off. Can I make it minimum width and the rest of the buttons same width.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Maxim
  • 191
  • 2
  • 12
  • 1
    I'm not sure what you mean by "prefer minimum width but still remain equal width". That seems contradictory. – Blazemonger Aug 03 '17 at 21:47
  • I'll try to clarify. I mean columns of equal minimum width. As you can see the longest labeled button has some space that can be cut off. Can I make it minimum width and the rest of the buttons same width. Like this :) – Maxim Aug 03 '17 at 21:52
  • 1
    The flex equal width feature (`flex-grow: 1`) is based on the free space in the container, not the length of one item. If you want the items to be smaller, so they tightly wrap the longest content and remain equal width, reduce the size of the container. Otherwise, this isn't something CSS can do. You'll need a script. – Michael Benjamin Aug 03 '17 at 22:15
  • 1
    Here's a related post: https://stackoverflow.com/q/34194042/3597276 – Michael Benjamin Aug 03 '17 at 22:16
  • Thank you very much guys. You made it clear. – Maxim Aug 03 '17 at 22:21

0 Answers0