Как я могу создать макет календаря с помощью css flexbox, чтобы содержимое не расширяло поля?

Question

Я сделал календарь с помощью css flexbox, и он выглядит красиво, пока я не добавлю немного контента в дни, затем он расширяет окно и отбрасывает макет. Вот изображение того, как выглядит макет в настоящее время. Обратите внимание на день с желтым тегом и его раскрытие. Я хочу скрыть любой контент, который в противном случае расширил бы день.

мой css выглядит так

.calendar {
  display:flex;
  flex-direction:column;
  width:100%;
  height:100%;
}
.week {
  flex:1;
  display:flex;
}
.day {
  flex:1;
}

Answer 1

Все флекс-элементы должны иметь одинаковые flex-basis, т.е. flex-basis:5em.

В качестве альтернативы, вы можете использовать display:grid.