flex wrapping - remove empty space

Question

I've created a div container, which includes some checkboxes. (In the code snippet are only the labels included). I set the display to inline flex and wrap. The max width of the container is 300px. The container gets an empty space on the right (the width depends on the items of the flex box) when the items get wrapped. How can you remove this space? So the container fits the wrapped content.

empty space in flex container

.module-group {
  display: inline-flex;
  flex-wrap: wrap;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: 0.25rem;
  max-width: 300px;
  gap: .5rem;
  padding: .5rem;
}

.btn-test {
  color: #0d6efd;
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  background-color: transparent;
  border: 1px solid #0d6efd;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
}

<h5>Test</h5>
<div class="module-group">
  <label class="btn-test" for="aaaaaa">aaaaaa</label>

  <label class="btn-test" for="bbbbbbbb">bbbbbbbb</label>

  <label class="btn-test" for="cccc">cccc</label>

  <label class="btn-test" for="uuid">ddddddddd</label>

  <label class="btn-test" for="eeeeee">eeeeee</label>

  <label class="btn-test" for="fff">fff</label>

  <label class="btn-test" for="ggggggggg">ggggggggg</label>

  <label class="btn-test" for="hhhhhh">hhhhhh</label>
</div>

score 1 · Answer 1 · answered May 11 '22 at 19:40

easiest solution would be the use of flex-grow:

.module-group {
    display: inline-flex;
    flex-wrap: wrap;

    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;

    max-width: 300px;
    gap: .5rem;
    padding: .5rem;

}

.btn-test {
    flex-grow: 1;
    color: #0d6efd;
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid #0d6efd;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

}

<h5>Test</h5>
        <div class="module-group">
            <label class="btn-test" for="aaaaaa">aaaaaa</label>

            <label class="btn-test" for="bbbbbbbb">bbbbbbbb</label>

            <label class="btn-test" for="cccc">cccc</label>

            <label class="btn-test" for="uuid">ddddddddd</label>

            <label class="btn-test" for="eeeeee">eeeeee</label>

            <label class="btn-test" for="fff">fff</label>

            <label class="btn-test" for="ggggggggg">ggggggggg</label>

            <label class="btn-test" for="hhhhhh">hhhhhh</label>
        </div>

Is there a way without changeing the size of the btn-test elements? — TimMatten, May 11 '22 at 19:44
not any clean solution. you can resize the container down, but theat would require for the buttons to exactly fill the space which will be pretty much impossible. — tacoshy, May 11 '22 at 19:45

Kameron · Answer 2 · 2022-05-11T19:48:45.110

Add flex: 1; to btn-test.

.module-group {
  display: inline-flex;
  flex-wrap: wrap;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: 0.25rem;
  max-width: 300px;
  gap: .5rem;
  padding: .5rem;
}

.btn-test {
  color: #0d6efd;
  display: inline-block;
  font-weight: 400;
  flex: 1;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid #0d6efd;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

<h5>Test</h5>
<div class="module-group">
  <label class="btn-test" for="aaaaaa">aaaaaa</label>
  <label class="btn-test" for="bbbbbbbb">bbbbbbbb</label>
  <label class="btn-test" for="cccc">cccc</label>
  <label class="btn-test" for="uuid">ddddddddd</label>
  <label class="btn-test" for="eeeeee">eeeeee</label>
  <label class="btn-test" for="fff">fff</label>
  <label class="btn-test" for="ggggggggg">ggggggggg</label>
  <label class="btn-test" for="hhhhhh">hhhhhh</label>
</div>

Is there a way without changeing the size of the btn-test elements? — TimMatten, May 11 '22 at 19:44
@TimMatten `margin: auto;` on `btn-test` but then there won't really be any growing / shrinking going on. You can also use `justify-content: center;` on `.module-group`. Can see that [here](https://i.stack.imgur.com/3l5o2.png) — Kameron, May 11 '22 at 19:45

flex wrapping - remove empty space

2 Answers2