Force equal width columns in CSS Flexbox [duplicate]

Question

I don't think what I'm trying to do is possible.

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
</div>

<div class="row">
    <div class="item"></div>
</div>

How can I make all the .items to take up the maximum, identical horizontal space that is (about) 33% in the 1st one, 50% in the second one, and 100% in the last?

The idea here is to not set the size of the .items (and avoiding setting ids to elements) for maximum flexibility and minimum error surface. If this is impossible with Flexbox, but doable using another strategy, what would it be?

Answer 1

You can just set width: 100%; to the .item (remove margins if you want them to take up 100% space):

.row {
  display: flex;
  flex-flow: row;
}

.item {
  background-color: teal;
  padding: 20px;
  width: 100%;
  margin: 10px;
}

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
</div>

<div class="row">
    <div class="item"></div>
</div>