csssasssusy

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


Solution

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