В своем дизайне я использую flex для правильного размещения элементов, а также для некоторых страниц я установил высоту. Однако, когда я использую высоту, возникает проблема, когда содержимое переполняется. Я не хочу устанавливать его для прокрутки, так как на мобильном телефоне есть странная ошибка, из-за которой контент подпрыгивает (см. Мои старые сообщения).
Вот мой контент с заданной высотой и минимальной высотой , https://imgur.com/a/WeVOpeT Я хочу первый результат, но с минимальной высотой. Это достижимо?
Вот код (я использую Tailwind):
<div class="app container mx-auto min-h-screen w-screen">
<div class="h-full w-3/4 lg:w-2/4 mx-auto font-display flex flex-col justify-between items-center text-white">
<img class="w-64 mt-8" src="/static/media/text.64815d36.svg" alt="Big Brain Home">
<div class="flex flex-col items-center">
<img class="self-center w-56" src="/static/media/brain.b2002065.svg" alt="Brain logo">
<p class="mt-8 text-center text-lg font-bold">let’s build the smart home of your dreams</p>
</div>
<div class="flex flex-col mb-6">
<p class="text-center text-sm font-light">swipe right or click on the next dot</p>
<div class="mt-2 flex flex-row justify-center"><span class="mx-1 h-3 w-3 bg-black opacity-100 rounded-full cursor-pointer"></span><span class="mx-1 h-3 w-3 bg-black opacity-50 rounded-full cursor-pointer"></span><span class="mx-1 h-3 w-3 bg-black opacity-50 rounded-full cursor-pointer"></span><span class="mx-1 h-3 w-3 bg-black opacity-50 rounded-full cursor-pointer"></span></div>
</div>
</div>
</div>
Минимальная высота / высота задается в первом div (родительском div).