Using Susy, how can I make a div expand to height of tallest sibling?

Question

In susyless CSS, I could make containers with various content lengths grow to the height of of their tallest sibling using display: table and display: table-cell.

.not-susy {
  .short {
    width: calc(100%/12 * 8);
  }
  .wrap{
    display: table;
    border-spacing: 20px;
  }
  .item {
    margin: 5px;
    display: table-cell;
  }
}

However this trick isn't working with Susy; How can I acheieve this same layout trick with Susy?

Meister

Answer 1

You are probably using the span() mixin, which is based around display: float. Instead, try using your usual technique, and only apply the span() function to set your width:

.susy {
  .short {
    width: span(8 of 12);
  }
  .wrap{
    display: table;
    border-spacing: gutter();
  }
  .item {
    margin: 5px;
    display: table-cell;
  }
}

I also used Susy's gutter() function to set the border-spacing. The span() and gutter() functions are the best part of Susy, because you can apply them to any property, and stay in control of everything else.