日历组件中Heading标签溢出容器，容器未自适应调整问题求助

一、文本溢出问题修复 #

你的时间块中<h5>标签文本溢出容器，核心原因是标题标签默认字体尺寸偏大，且未配置自动换行规则。通过以下CSS修改即可解决：

修改.calendar-innerblock及内部标题样式 #

在test.css中添加或更新如下代码：

.calendar-innerblock {
    max-width: 100%;
    display: flex;
    border-color: #888;
    border-width: 1px;
    border-radius: 2px;
    border-style: dashed;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 5%;
    /* 强制文本在容器边界自动换行 */
    white-space: normal;
}

.calendar-innerblock h5 {
    /* 缩小字体适配小容器 */
    font-size: 0.75rem;
    /* 移除默认margin避免内部挤压 */
    margin: 0;
    text-align: center;
}

二、外观优化建议 #

1. 布局间距优化 #

.calendar-day {
    background-color: #222;
    border-radius: 4%;
    /* 设置最小宽度避免日期块过窄 */
    min-width: 180px;
    /* 调整内边距让内容更舒展 */
    padding: 1rem !important;
}

.calendar-outterblock {
    margin: auto;
    /* 减少冗余padding释放内部空间 */
    padding: 5% 0;
}

2. 交互与视觉区分 #

• 给时间块添加hover交互效果：

.calendar-innerblock:hover {
    border-color: #fff;
    background-color: rgba(255,255,255,0.1);
    transition: all 0.2s ease;
}

• 区分两周日期块（给第二周的日期容器添加week-2类）：

<div class="col-auto week-2" style="padding: 10%;">

.week-2 {
    background-color: rgba(255,255,255,0.05);
    border-radius: 4px;
}

3. 深色主题滚动条美化 #

.calendar-container::-webkit-scrollbar {
    height: 8px;
}

.calendar-container::-webkit-scrollbar-track {
    background: #333;
    border-radius: 4px;
}

.calendar-container::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

.calendar-container::-webkit-scrollbar-thumb:hover {
    background: #777;
}

4. 标题层级视觉优化 #

.calendar-day h3 {
    font-size: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #444;
    padding-bottom: 0.5rem;
}

.calendar-day h4 {
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
}

内容的提问来源于stack exchange，提问作者Even Pardides