Div height set to div width plus extra percentage

Question

I am building a calendar using Bootstrap and Less (actually using Meteor JS with the less, mizzao:bootstrap-3, and html5cat:bootstrap-material-design packages) . I have the calendar .less file defined as such:

/*****************************************************************************/
/* Calendar: Style */
/*****************************************************************************/

@cal-min-width: 320px;
@number-of-days: 7;
@column-width: percentage(1/@number-of-days);
@column-height: XXX;  // Not sure what to do here...


.row:before {
  display: table;
  content: " ";
}

.grid-calendar {
  min-width: @cal-min-width;
  .row {
    /*
    override these from bootstrap

    margin-right: -15px;
    margin-left: -15px;
    */
    margin: 0;

  }

  .calendar-week .grid-cell {
    background-color: #f6f6f6;
    border: 1px solid #fff;
  }

  .calendar-week-header .grid-cell > div > div {
    padding-bottom: 10px;
    height: auto;
  }

  .grid-cell {
    display: inline-block;
    float: left;
    min-height: 1px;
    padding: 0;
    position: relative;
    width: @column-width;

    &.previous-month {
      color: #a6a6a6;
    }

    &.next-month {
      background-color: #e1e1e1;
    }

    > div {
      display: flex;
      justify-content: center;
      width: 100%;

      > div {
        height: 0;
        padding: 50% 0;
      }
    }
  }
}

And a quick sample HTML with only one week here:

<div class="row">
  <div class="grid-calendar">
    <div class="row calendar-week-header">
      <div class="col-xs-1 grid-cell calendarSunday">
        Sun
      </div>
      <div class="col-xs-1 grid-cell calendarMonday">
        Mon
      </div>
      <div class="col-xs-1 grid-cell calendarTuesday">
        Tues
      </div>
      <div class="col-xs-1 grid-cell calendarWednesday">
        Wed
      </div>
      <div class="col-xs-1 grid-cell calendarThursday">
        Thur
      </div>
      <div class="col-xs-1 grid-cell calendarFriday">
        Fri
      </div>
      <div class="col-xs-1 grid-cell calendarSaturday">
        Sat
      </div>
    </div>
    <div class="row calendar-week">
      <div class="col-xs-1 grid-cell">
        31
      </div>
      <div class="col-xs-1 grid-cell">
        1
      </div>
      <div class="col-xs-1 grid-cell">
        2
      </div>
      <div class="col-xs-1 grid-cell">
        3
      </div>
      <div class="col-xs-1 grid-cell">
        4
      </div>
      <div class="col-xs-1 grid-cell">
        5
      </div>
      <div class="col-xs-1 grid-cell">
        6
      </div>
    </div>
  </div>
</div>

So far it's looking pretty good, but I need to get the heights of the .grid-cells to be right. What I would like to do is define the @column-height to be the same as the width plus some percentage, so that as the width changes responsively the height of the cell changes as well. But @column-width is set as a percentage, not a pixel size. My fallback is to maybe use media queries to step down the height based on screen width, but I'd rather make it more fluid.