Переполнение контента при использовании соотношения сторон в Flex в Safari (WebKit) ⇐ Html

[Anonymous]

Я борюсь с проблемой, которая должна быть маленькой, но я, кажется, не знаю, как это сделать. Я строю календарь, в котором я хочу, чтобы у каждой ячейки были соотношение сторон, и она отображается в Flexbox, который показывает в столбце на мобильных устройствах и строке на рабочем столе. По -видимому, он отлично выглядит на хроме и других двигателях браузера, но два календаря перекрываются без роста Flexbox, чтобы соответствовать контенту. < /P>
Вот пример кода. < /P>

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

{/**make array of 2 weeks */}
{[1, 2].map((week, index) => (

February


{/**make array of 4 weeks */}
{[1, 2, 3, 4].map((week, index) => (

{/** Make array of 7 days */}
{Array.from({ length: 7 }, (_, i) => i + 1).map(
(day, index) => (


{day}


)
)}

))}



))}


< /code>
Вот css < /p>
.picker-month {
flex-grow: 1;
display: flex;
flex-direction: column;
}

.picker-month-grid {
text-align: center;
}

.picker-weekdays {
display: flex;
}

.picker-week {
display: flex;
}

.picker-day {
flex-grow: 1;
display: flex;
aspect-ratio: 1;
margin-bottom: 0.2rem;
}

.picker-day-button {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
font-size: 0.8rem;
}

Вот ссылка на песочницу
https://codesandbox.io/p/sandbox/z8yj588 твою > Просмотр на Safari < /p>

Просмотр на Chrome


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