Столбцы CSS Tailwind в мегаменю Safari проблема/ошибка?CSS

Разбираемся в CSS
Ответить
Anonymous
 Столбцы CSS Tailwind в мегаменю Safari проблема/ошибка?

Сообщение Anonymous »


Я сделал демо-версию игры Tailwind. https://play.tailwindcss.com/2xRDmC52V7 Это упрощенная версия происходящего. Эта часть представляет собой открытие мегаменю, отсюда и свойство absolute.

При использовании absolute в Safari все становится странно. Я сделал пример в TailwindCSS, поскольку это просто. Та же проблема существует и с обычным CSS. Я ищу решение с любым из них.
Скриншот Safari ниже.
См. элемент div с красной рамкой, он должен быть вокруг всего содержимого.


Изображение

Скриншот Chrome ниже
Вот как это должно выглядеть.


Изображение

Проблема
В Safari div не принимает ширину содержимого, поэтому пункты меню выходят за пределы контейнера div. Я не могу установить ширину, поскольку меню динамическое (длина контента разная). И установка ширины 100% также не работает, поскольку она принимает ширину родительского пункта меню (которая очень мала).

Как это исправить, не задавая явную ширину?
Воспроизведение
Lorem ipsum 1 Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 2 Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 3 Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 4 Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 5 Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsu.. 6 Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum хвостовой ветер.конфигурация = {}
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»