Equal width flexbox rows, regardless of column count or column contents

Question

I am trying to create three rows via flexbox that will contain a variable number of columns (the top and bottom rows will match in QTY) and a middle column that is just a single column.

Since the column count is variable, there is no width set on the parent(s).

I am struggling to get the width of the middle column to match that of the top and bottom rows.

section {
  margin: 0 auto;
  display: flex;
}

.col {
  width: 100px;
  height: 100px;
  border-color: #000;
  border-style: solid;
  border-width: 1px 0px 1px 1px;
}

.col:last-child {
  border-right: 1px solid #000;
}

.middle {
  height: 100px;
  width: inherit;
  border-color: #000;
  border-style: solid;
  border-width: 0px 1px 0px 1px;
}

<section>
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
</section>
<section>
  <div class="middle">Middle</div>
</section>
<section>
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
</section>

https://jsfiddle.net/o5xLuq51/

Michael Benjamin · Accepted Answer · 2017-10-23T17:55:55.733

Make the overall container of these elements, which happens to be the body element in this case, an inline-level flex container with column direction.

This creates a column with a width set by the longest row.

Because an initial setting on flex items is align-self: stretch, all rows not having a defined width will expand the full width of the container (more details).

Then to get .middle to expand the full width of its parent, use flex-grow: 1.

/* NEW */
body {
  display: inline-flex;
  flex-direction: column;
  /* border: 1px dashed red; */ /* uncomment to see container borders */
}

section {
  /* margin: 0 auto; */
  display: flex;
}
.col {
  width: 100px;
  height:100px;
  border-color: #000;
  border-style: solid;
  border-width: 1px 0px 1px 1px;
}
.col:last-child {
  border-right: 1px solid #000;
}
.middle {
  flex-grow: 1; /* NEW */
  height: 100px;
  /* width: inherit; */
  border-color: #000;
  border-style: solid;
  border-width: 0px 1px 0px 1px;
}

<section>
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
</section>
<section>
  <div class="middle">Middle</div>
</section>
<section>
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
</section>

Equal width flexbox rows, regardless of column count or column contents

1 Answers1