1252748 1252748 - 1 month ago 8
Sass (Sass) Question

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

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

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.