How to center the whole block of a flexbox?

Question

I have multiple DIVs (the DIVs can be generated from an array, so I don't know the number of DIVs beforehand) of different widths. I'm using flexbox with flex-wrap to order them like so:

.outercontainer {
  border: 1px solid blue;
  width: 400px;
}
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.wide {
  width: 200px;
}
.normal {
  width: 100px;
}
.item {
  border: 1px solid red;
  height: 30px;
}

https://codepen.io/pandaquests/pen/RNbGNLd

This all looks good except there is a space on the right hand side:

Ideally it should look like this (space on the left and right of the whole block is equal):

Is there a way to center the whole block? I tried justify-content:center, but this would center the last two elements as well. I tried grid with grid-auto-flow: row dense; but that would make the items overlap:

.outercontainer {
  border: 1px solid blue;
  width: 400px;
}
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-flow: row dense;
  grid-column: span 2;
}
.wide {
  width: 200px;
  background: pink;
}
.normal {
  width: 100px;
}
.item {
  border: 1px solid red;
  height: 30px;
}

https://codepen.io/pandaquests/pen/pvzEvPE

I tried to prevent this using grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); and auto-fit (instead of auto-fill), and grid-column:span 2 it still doesn't work.

Answer 1

You have to think otherwise and get the elements fill the entire width of their cell area instead shrinking the whole grid to what is inside the cells. columns are here set to minmax(100px, 1fr) it won't be different.

To keep only a 400px width at the most , you may try to update padding values according to the view port (or the parent container)

examples & codepen to play with :

• grid : https://codepen.io/gc-nomade/pen/KwPgdbP

.outercontainer {
  border: 1px solid blue;
  padding: 0 calc(50cqw - 200px);
  margin:1em
}

.container {
  display: grid;
  gap: .5em;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-flow: row dense;
}

.wide {
  min-width: 200px;
  background: pink;
  grid-column: span 2
}

.normal {
  min-width: 100px;
}

.item {
  border: 1px solid red;
  height: 30px;
}

section {
  container-type: inline-size;
  max-width: 800px;
  margin: 1em auto;
}

body {
  margin: 0;
}

<div class="outercontainer">
  <div class="container">
    <div class="wide item">item1</div>
    <div class="normal item">item2</div>
    <div class="normal item">item3</div>
    <div class="normal item">item4</div>
    <div class="normal item">item5</div>
    <div class="normal item">item6</div>
    <div class="normal item">item7</div>
    <div class="normal item">item8</div>
    <div class="normal item">item9</div>
    <div class="normal item">item10</div>
  </div>
</div>
<section>
  <div class="outercontainer">
    <div class="container">
      <div class="wide item">item1</div>
      <div class="normal item">item2</div>
      <div class="normal item">item3</div>
      <div class="normal item">item4</div>
      <div class="normal item">item5</div>
      <div class="normal item">item6</div>
      <div class="normal item">item7</div>
      <div class="normal item">item8</div>
      <div class="normal item">item9</div>
      <div class="normal item">item10</div>
    </div>
  </div>
  <section>

• flex https://codepen.io/gc-nomade/pen/qEWabEp

body {
  margin: 0;
}

.outercontainer {
  border: 1px solid blue;
  padding: 0 calc(50cqw - 200px);
  margin: 1em
}

.container {
  display: flex;
  flex-wrap: wrap;
  gap: .5em;
}

.item.wide {
  min-width: 200px;
  flex: 2;
  background: pink;
}

.normal {
  min-width: 100px;
}

.item {
  border: 1px solid red;
  height: 30px;
  flex: 1;
}

section {
  container-type: inline-size;
  max-width: 800px;
  margin: 1em auto;
}

<div class="outercontainer">
  <div class="container">
    <div class="wide item">item1</div>
    <div class="normal item">item2</div>
    <div class="normal item">item3</div>
    <div class="normal item">item4</div>
    <div class="normal item">item5</div>
    <div class="normal item">item6</div>
    <div class="normal item">item7</div>
    <div class="normal item">item8</div>
    <div class="normal item">item9</div>
    <div class="normal item">item10</div>
  </div>
</div>
<section>
  <div class="outercontainer">
    <div class="container">
      <div class="wide item">item1</div>
      <div class="normal item">item2</div>
      <div class="normal item">item3</div>
      <div class="normal item">item4</div>
      <div class="normal item">item5</div>
      <div class="normal item">item6</div>
      <div class="normal item">item7</div>
      <div class="normal item">item8</div>
      <div class="normal item">item9</div>
      <div class="normal item">item10</div>
    </div>
  </div>
  <section>

This seems quiet close to your needs.