Remove white-space caused by wrap

Question

I have a fieldset containing multiple buttons with the same fixed width. In a row/line it should fit as many buttons as possible. However during the linebreak it will cause a big white-space.

I tried display: flex; in combination with flex-wrap. However the white-space remains or the box overflows

Also I tried css-grid by using grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); which doesn't work either.

Anybody else with an idea how to size either size the box to the content to not leave a white-space or to size the buttons to fill up all the space without breaking the box max-width and fit as many as possible?

I know why the white space there, but I can't figure out how to remove it. I'm aware that it possibly requires Javascript. However related questions on SO mentioned this aswell but where unable to eleborate a Javascript solution to be understandable/reproduciable.

div {
  max-width: 80%;
}

button{
  width: 10em;
}

<div>
  <fieldset>
    <legend>Color</legend>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>7</button>
    <button>8</button>
    <button>9</button>
  </fieldset>
</div>

When you were using flex model, did you try to add flex-grow? `fieldset > * { flex-grow: 1 }` — Amaury Hanser, Mar 02 '21 at 16:53
@AmauryHanser no I didnt because it will resize the buttons to different width if the ammount differs within a line. They all need the same width. — tacoshy, Mar 02 '21 at 16:56
@PauliD no those "related questions" do not anwser the question for me. They mention that it can be doen with the use of Javascript. But there is no sufficient explanation on how to use Javascript to shrink the box. — tacoshy, Mar 02 '21 at 17:03
are the width of your button fixed? If yes we can find a solution, if not then it's difficult — Temani Afif, Mar 02 '21 at 19:31
@TemaniAfif yes the button width is fixed at `20em` thats why I think that it should be possible. — tacoshy, Mar 03 '21 at 04:26

score 1 · Accepted Answer · answered Mar 03 '21 at 16:25

If the sizes are fixed here is an idea using CSS grid. The trick is that we define a grid using a repetition of the button width and we make the fieldset take all the columns. This will for it to have a width equal to a N*width of button where N is dynamic and depend on the screen size

div.box {
  display:grid;
  font-size:14px;
  /*0.75em is the default padding of fieldset */
  grid-template-columns:0.75em repeat(auto-fit,10em) calc(0.75em + 4px);
  grid-gap:4px;
}
fieldset {
  grid-column:1/-1;
}

button{
  width: 10em;
  font-size:14px; /* define the font-size to avoid the default one*/
  margin-right:4px; /* same as gap */
}

<div class="box">
  <fieldset>
    <legend>Color</legend>
    <button>1</button><button>2</button><button>3</button><button>4</button><button>5</button><button>6</button><button>7</button><button>8</button><button>9</button>
  </fieldset>
</div>

Remove white-space caused by wrap

1 Answers1