Проблемы с выравниванием сетки и равномерным размером с хромом (работает в Firefox) ⇐ CSS

[Anonymous]

Я строю еженедельный планировщик (календарь) и испытываю проблемы выравнивания с рядами в Chrome (он прекрасно работает в Firefox). Я использую ванильный javascript, html и css. верхние и нормальные события, которые могут охватывать один или несколько дней. < /p>
Когда нет событий, календарь отображается правильно. Однако при добавлении события Fullday с несколькими событиями высота некоторых ячеек сетки нормальных событий становится нерегулярной (в то время как ширина остается последовательной). Добавление только нескольких нормальных событий не делает высоту ячейки сетки нерегулярными < /p>
события, которые перекрываются в одном и том же стеке сетки горизонтально.
Вот тело HTML страницы ( Я удалил дополнительные дневные контейнеры, оригинал имеет 7 контейнеров): < /p>

Код: Выделить всё

:host {
--today-background-color: green;
--surface1: #f5f5f5;
--surface2: #e0e0e0;
--base: #fff;
--text: black;
--surface0: #f5f5f5;
--text-color-event: black;
}
.weekly-calendar-container {
width: 100%;
margin: 0 auto;
text-align: left;
}

.weekly-calendar-title {
display: flex;
justify-content: flex-start;
align-items: center;
padding-bottom: 1rem;
color: var(--text);
position: sticky;
top: 0;
z-index: 3;
background-color: var(--base);
}

.weekly-calendar-title h2 {
text-transform: uppercase;
margin: 0;
}

.weekly-calendar {
display: grid;
grid-template-columns: 50px repeat(7, 1fr); /* Add a narrow column for the hours */
grid-template-rows: repeat(301, 1fr);
gap: 0px;
width: 100%;
margin: 0 auto;
position: relative;
height: 80rem;
}

.parte-arriba{
display: contents;
position:absolute;
grid-template-columns: 50px repeat(7, 1fr); /* Add a narrow column for the hours */

}
.parte-abajo{
grid-template-columns: 50px repeat(7, 1fr); /* Add a narrow column for the hours */
position:relative;
display: contents;
}
.hour-label {
background-color: var(--surface1);
color: var(--text);
padding: 5px;
box-sizing: border-box;
text-align: center;
position: relative;
z-index: 1;
grid-row: span 12;
grid-column-start: 1;
grid-column-end: 2;
border-right: 1px solid var(--overlay0);

}
.hour {
background-color: var(--surface0);
color: var(--text);
padding: 5px;
box-sizing: border-box;
text-align: end;
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
border-bottom: 1px solid var(--overlay0);
border-right: 1px solid var(--overlay0);
}
.day-header {
border: 1px solid var(--overlay0);
background-color: var(--surface2);
color: var(--text);
padding: 5px;
box-sizing: border-box;
text-align: center;
position: sticky;
top: 2rem;
z-index: 3;
border-right: none;
}
.day-header.today span {
background-color: var(--today-background-color);
padding: 0.2rem;
border-radius: 5px;
}
.full-day {
grid-area: 2 / 2 / 3 / 9;
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-flow: column;
grid-auto-rows: minmax(0px, 2rem);
gap: 1px;
margin-bottom: 2px;
border-left: 1px solid var(--overlay0);
border-right: 1px solid var(--overlay0);
}
.button {
background-color: var(--surface1);
border: 1px solid var(--overlay0);
color: var(--text);
padding: .2rem .4rem;
cursor: pointer;
margin-right: 0.3rem;
}
.day-container {
grid-row-start: 3;
grid-row-end: 291;
display: grid;
/* grid-template-rows: repeat(288, minmax(0, 1fr));  */
grid-auto-flow: row;
position: absolute;
width: calc(100% - .4rem);
height: 100%;
grid-auto-columns: minmax(0, 1fr);
z-index: 2;
grid-auto-flow: row;
overflow: hidden;
padding: 0rem .2rem;
}
.event {
background-color: var(--subtext1);
padding: .2em;
box-sizing: border-box;
z-index: 2;
height: 100%;
color: var(--text-color-event);
/*border-radius: 10px;*/
/*border-left: 1px solid var(--surface0);
border-right: 1px solid var(--surface0);*/
overflow: hidden;
position: relative;
padding-left: .5rem;
}
.event.full-day-event {
text-align: center;
}

/* Linea de color a la izquierda*/
.event_color {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: .4em;
background-color: rgba(0, 0, 0, 0.3);
/*border-top-left-radius: .2rem;
border-bottom-left-radius: .2rem;*/
border-radius: 0.2rem;
}
.event-text {
white-space: wrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hour-text {
position: absolute;
top: -.5rem;
right: 0;
}



Today
<
>
November 14 - November 20, 2024 / Week 46



14 Thu

Event 2.1



0:00
1:00
style="grid-column: 2 / 3; grid-template-rows: repeat(288, minmax(1px, 1fr));">

Я попытался изменить параметры отображения (Flex, Grid, содержимое и т. Д.) И изменение способа добавления элементов.

Подробнее здесь: https://stackoverflow.com/questions/794 ... in-firefox