css - 如何使用 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 元素必须具有相同的 flex-basis，即 flex-basis:5em。

或者，您可以使用 display:grid。