Flex box to assign largest child width to other child width

Question

I have a group of child whose width should be similar. To be simple child with largest width should be assigned to other child. I tried using flexbox but not able to get it. Is it possible to achieve in flex box or should i go for JS solution. Refer my example which i tried. Please don't post any javascript answer for it.

.flex{
  display:flex;
  flex-direction:column;
  align-items:baseline
}
.flex > div{
  background:#aaa
}

<div class="flex">
  <div>
      Text to check
  </div>
    <div>
      Text to check for similar width
  </div>
   <div>
      Text to check for similar width - will it work
  </div>
</div>

Answer 1

Use display:inline-flex; and give the items a width of 100%.

.flex{
  display:inline-flex;
  flex-direction:column;
  align-items:baseline
}
.flex > div{
  background:#aaa;
  width: 100%;
}

<div class="flex">
  <div>
      Text to check
  </div>
    <div>
      Text to check for similar width
  </div>
   <div>
      Text to check for similar width - will it work
  </div>
</div>

---

Updated, thanks to @vals comment

Or change to align-items: stretch on the container and drop the width: 100% on the items.

.flex{
  display:inline-flex;
  flex-direction:column;
  align-items:stretch;
}
.flex > div{
  background:#aaa
}

<div class="flex">
  <div>
      Text to check
  </div>
    <div>
      Text to check for similar width
  </div>
   <div>
      Text to check for similar width - will it work
  </div>
</div>