1

I have been attempting to use flexbox for this, but any other css-only solution would be acceptable.

I want all items along a row to expand to the width of the largest item, so the result is identical widths. However, at the same time without the parent element expanding beyond the minimum size needed to accomplish this.

If you look at my Codepen example, altering the flex-grow value on <ul> elements will make this work for some of the demo examples, but not all.

http://codepen.io/MattyBalaam/pen/VepxWq

div {
  display: flex;
  justify-content: center;
}
ul {
  display: flex;
  justify-content: center;
  padding: 0 0 2em;
  flex-grow: 0.15;    
}
li {
  list-style: none;
  margin: 2em;
  flex: 1 1 0;
}
<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>----3----</li>
  </ul>
</div>
Sebastian Brosch
  • 42,106
  • 15
  • 72
  • 87
Matty Balaam
  • 1,259
  • 8
  • 13
  • 1
    Pretty sure what you are asking is not possible with CSS,,,because that's not *exactly how flex-grow works: https://css-tricks.com/flex-grow-is-weird/ – Paulie_D Jan 07 '16 at 09:50
  • Possible duplicate of [Every item to have the same width as the widest element](http://stackoverflow.com/q/31159732/1529630) – Oriol Jan 08 '16 at 07:17

0 Answers0