Мобильная версия
Он занимает всю ширину, как и предполагалось. Проблема в том, что когда у него есть контент, и он слишком длинный, он нарушает дизайн и становится слишком длинным:
[img]https:/ /i.sstatic.net/XIhC3qFc.png[/img]
Как видите, ширина слишком велика и портит дизайн. Переполнение необработанных выходных данных нарушает дизайн. Это мой код:
ScrapePage.tsx
Raw Output
Extract
RawOutput.tsx
const RawOutput = ({ input }: Props) => {
return (
{input || 'No input provided'}
)
}
Когда я применяю overflow-auto к родительскому элементу div, это не нарушает дизайн с точки зрения высоты:
А вот по ширине конструкция нарушена:
< img alt="изображение контейнера с нарушенным дизайном с использованием width" src="https://i.sstatic.net/WSlDNGwX.png" />
По сути, моя цель состоит в том, чтобы ширина необработанного вывода фиксировалась в зависимости от размера экрана. и будет иметь свиток, только если он слишком длинный. Прекрасным примером является такой дизайн в stackoverflow, когда общий код слишком длинный:
[img]https://i.sstatic.net /HTRQJzOy.png[/img]
ОБНОВЛЕНИЕ: это мой index.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
/* UNI STYLE */
* {
@apply m-0 p-0;
}
html,
body,
#root {
@apply h-full;
}
/* TOP NAVIGATION */
.mobile-navigation {
@apply flex items-center justify-between bg-gray-800 p-4 text-white md:hidden;
}
.mobile-logo {
@apply text-lg font-bold;
}
.mobile-button {
@apply z-50 focus:outline-none;
}
/* EOL - TOP NAVIGATION */
/* SIDEBAR CSS */
.sidebar {
@apply flex h-screen flex-col md:flex-row;
}
.logo {
@apply text-center font-bold sm:p-3 md:p-6 md:text-xl;
}
nav ul .links {
@apply hover:bg-test block px-6 py-4;
}
nav ul .mobile-links {
@apply hover:bg-test block px-4 py-4 text-center hover:text-fountainBlue;
}
.active {
font-weight: bold;
color: #86a3da;
}
}
Подробнее здесь: https://stackoverflow.com/questions/793 ... ilwind-css
