Flexbox Scrolling Parent, Children 100% Height

This question already has an answer here:

  • Make child element use 100% of total OVERFLOW height of parent

    4 answers

I’m working on an application that contains a custom calendar. The calendar is styled with Flexbox (all the building / date logic is handled with React).

The calendar is functioning great, but I’m having a styling problem I’m not sure how to solve.

When lots of events are added in a particular week, I’d like the week div to overflow: auto; (show a scrollbar) so that you can view all of the events.

The problem I am having is a height issue on the day divs. I don’t have a fixed height on the parent (week div) since I am using flexbox with flex: 1; to fill the space. How can I get the children (day divs) to use the entire height of the overflowing parent (week div)?

I’d prefer to have a CSS only solution that works cross-browser.

Sample CodePen Here:
https://codepen.io/anon/pen/jLQyxX?editors=0100

HTML:

<div class="calendar">
  <div class="week">
    <div class="day">6</div>
    <div class="day">7</div>
    <div class="day">8</div>
    <div class="day">
      <div>This</div>
      <div>Border</div>
      <div>Doesn't</div>
      <div>Scale</div>
      <div>Correctly</div>
      <div>(Scroll Down)</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
      <div>...</div>
    </div>
    <div class="day">10</div> 
  </div>
</div>

CSS:

body {
  display: flex;
  flex: 1;
  padding: 0;
  margin: 0;
  height: 100vh;
}

.calendar {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: 1px solid black;
  border-bottom: none;
  margin: 15px;
}

.week {
  display: flex;
  flex: 1;
  overflow: auto;
  border-bottom: 1px solid black;
}

.day {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 10px;
  outline: 1px dotted red;
}


One possible solution would be to add a wrapper wrap between the week and day
This works on Chrome/Firefox/Edge, IE though, has some issue I am looking into, and don’t have Safari to test it on.

Updated codepen

Stack snippet


Since your main grid keeps an equal size per day (use flex: 1 to fill remaining space), another option would be to use absolute positioning for the week and day, and then make day a flex container to handle its content.

The best way to do it is moving the overflow: auto from .week to .day