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?
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.
