Calendar using flexbox

by emilcieslar

HTML

<div class="calendar">
  <div class="calendar__days-wrapper">
    <div class="calendar__day">Mon</div>
    <div class="calendar__day">Tue</div>
    <div class="calendar__day calendar__day--active">Wed</div>
    <div class="calendar__day">Thu</div>
    <div class="calendar__day">Fri</div>
    <div class="calendar__day">Sat</div>
  </div>
</div>

SCSS

.calendar {
  overflow: hidden;
  overflow-x: auto;
  background: red;
  margin: 10px;
  border: 1px solid red;
}

  .calendar__days-wrapper {
    height: 100px;
    min-width: 200px;
    width: 100%;
    display: flex;
  }
  
  .calendar__day {
    height: 100%;
    background: gray;
    outline: 1px solid lime;
    flex: 1;
  }
  
  .calendar__day--active {
    flex: 1.4;
  }