How to deal with flex items having varying height?

Question

I've created this Plunker with the following markup:

.items {
  display: flex;
  align-items: center;
  padding: 10px;
  -webkit-flex-flow: row wrap;
}

.items span {
  border: 1px solid #888;
  margin: 5px;
  padding: 10px;
  width: 35%;
}

<div class="row-fluid">
  <div class="span8">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
  <div class="span4" style="border: 1px solid red">
    <div class="items">
      <span>First</span>
      <span>Second</span>
      <span>Third</span>
      <span>Fourth</span>
      <span>Fifth which has more text than others</span>
      <span>Sixth</span>
      <span>Seventh</span>
      <span>Eighth</span>
      <span>Ninth</span>
      <span>Tenth</span>
      <span>Eleventh</span>
      <span>Twelfth</span>
    </div>
  </div>
</div>

As you can see, when one item takes up more height than the "normal" items, it looks comparably larger than the item next to it and, therefore, a little weird. Is there a way to handle this gracefully eg. make item heights in each row the same?

Also, is there a better way to handle specifying column width for a container than resizes responsively? I wanted two columns and, with padding, width: 35% appeared to work fine, but it seems hacky.

Answer 1

You can just remove align-items: center and also use calc() for width of columns. So if you want two columns you can use calc(50% - 10px) where 10px is 5px margin * 2 for left and right side, and for padding you can use box-sizing: border-box.

* {
  box-sizing: border-box;
}
.items {
  display: flex;
  padding: 10px;
  flex-flow: row wrap;
}
.items span {
  border: 1px solid #888;
  margin: 5px;
  padding: 10px;
  flex: 0 0 calc(50% - 10px);
}

<div class="items">
  <span>First</span>
  <span>Second</span>
  <span>Third</span>
  <span>Fourth</span>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, dolores!</span>
  <span>Sixth</span>
  <span>Seventh</span>
  <span>Eighth</span>
</div>