Flexbox column, cells should all have same height

Question

I am making a daily calendar, and each day has 12 time slots. The 12 time slots fill the screen vertically and should be of equal height -- whether they have content or not. However, when a cell has some text content, its height grows unnecessarily. Why is that? I could programatically set the height of the cells but would prefer a CSS solution.

Here is the code (and here is a CodePen https://codepen.io/alpo22/pen/YzYqpWZ?editors=1100):

.appointment-cells {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: calc(100vh - 15px);
}

.appointment-cell {
  border: 1px dashed #ccc;
  border-radius: 4px;
  flex: 1 1 auto;
  overflow: hidden;
  max-height: 100px;
  min-height: 25px;
  background-color: #fafafa;
}

<div class="appointment-cells">
  <div class="appointment-cell"></div>
  <div class="appointment-cell">why is this cell taller?</div>
  <div class="appointment-cell"></div>
  <div class="appointment-cell"></div>
  <div class="appointment-cell"></div>
  <div class="appointment-cell"></div>
  <div class="appointment-cell"></div>
  <div class="appointment-cell"></div>
  <div class="appointment-cell"></div>
  <div class="appointment-cell"></div>
  <div class="appointment-cell"></div>
  <div class="appointment-cell"></div>
</div>

Thank you.

the duplicate deals with width but the same logic apply to height since you are using a column direction — Temani Afif, Mar 18 '22 at 19:45
@TemaniAfif using `flex: 0` does not make the flexbox fill the screen vertically. But using `flex: 1 0 0;` as mentioned in that duplicate does work. Thanks. — Alan P., Mar 18 '22 at 19:52

Flexbox column, cells should all have same height

0 Answers0