CSS flexbox fully collapse all empty children - html

Question

Given an html structure that follows the schema in this snippet, how can I fully collapse the empty "col" divs, leaving the content divs equally sized (two columns in this case)?
* {
box-sizing: border-box;
}
.container {
border: 1px dashed rgba(255, 0, 0, .5);
background-color: beige;
padding: 20px 10px;
width: 500px;
}
.row {
border: 1px dashed rgba(0, 0, 255, .5);
display: flex;
}
.col {
flex: 1 1 auto;
min-width: 0;
}
.content {
border: 1px dashed rgba(0, 0, 0, .25);
padding: 0 10px;
width: 100%;
}
<section class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col">
<p class="content">Foo</p>
</div>
<div class="col"></div>
<div class="col">
<p class="content">Bar</p>
</div>
<div class="col"></div>
</div>
</section>

Answer 1

You can select the empty elements with the .col class by using the :empty pseudo class.
I've chosen to change the flex attribute on the, so they will shrink, but you can also set display: none, or force max-width: 0, etc...
* {
box-sizing: border-box;
}
.container {
border: 1px dashed rgba(255, 0, 0, .5);
background-color: beige;
padding: 20px 10px;
width: 500px;
}
.row {
border: 1px dashed rgba(0, 0, 255, .5);
display: flex;
}
.col {
flex: 1 1 auto;
min-width: 0;
}
.col:empty {
flex: 0 1 0;
}
.content {
border: 1px dashed rgba(0, 0, 0, .25);
padding: 0 10px;
width: 100%;
}
<section class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col">
<p class="content">Foo</p>
</div>
<div class="col"></div>
<div class="col">
<p class="content">Bar</p>
</div>
<div class="col"></div>
</div>
</section>

Answer 2

I was able to resolve the issue by setting the content to a nuclear width of 100vw with a max-width of 100%. The caveat is that this is not compatible with any version of IE.
* {
box-sizing: border-box;
}
.container {
border: 1px dashed rgba(255, 0, 0, .5);
background-color: beige;
padding: 20px 10px;
width: 500px;
}
.row {
border: 1px dashed rgba(0, 0, 255, .5);
display: flex;
}
.col {
flex: 1 1 auto;
min-width: 0;
}
.content {
border: 1px dashed rgba(0, 0, 0, .25);
padding: 0 10px;
width: 100vw;
max-width: 100%;
}
<section class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col">
<p class="content">Foo</p>
</div>
<div class="col"></div>
<div class="col">
<p class="content">Bar</p>
</div>
<div class="col"></div>
</div>
</section>

Answer 3

Another solution is to use good-old table display props if IE support is needed.
* {
box-sizing: border-box;
}
.container {
border: 1px dashed rgba(255, 0, 0, .5);
background-color: beige;
padding: 20px 10px;
width: 500px;
display: table;
}
.row {
border: 1px dashed rgba(0, 0, 255, .5);
display: table-row;
}
.col {
display: table-cell;
min-width: 0;
}
.content {
border: 1px dashed rgba(0, 0, 0, .25);
padding: 0 10px;
width: 100%;
}
<section class="container">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col">
<div class="content">Foo</div>
</div>
<div class="col"></div>
<div class="col">
<div class="content">Bar</div>
</div>
<div class="col"></div>
</div>
</section>