Невозможно прокрутить до последнего элемента в контейнере содержимого tailwindcss - PullRequest
Новая
       11

Невозможно прокрутить до последнего элемента в контейнере содержимого tailwindcss

1 голос
/ 11 марта 2020

Я хочу создать макет приложения, в котором есть верхняя панель инструментов с набором элементов div,

, затем боковая панель и окно содержимого с верхней навигацией

Desired Layout

У меня почти работает структура, но я не могу прокрутить до конца контейнера содержимого. Я хочу, чтобы все остальное было исправлено. Я включил код и скрипку. У меня такое ощущение, что это связано с h-экраном, который я поместил в контейнер содержимого, но если я попробовал h-full, он вообще не прокручивается. 

<div class="h-screen  overflow-hidden" >
    <div class="p-4 bg-yellow-500">
        <div class="h-10 bg-green-500">

        </div>
        <div class="h-10 bg-blue-500">

        </div>
    </div>

    <div class="flex">
        <div class="w-48">
            sidebar
        </div>

        <div class="w-full bg-indigo-500 p-2 ">

            <div class="h-10 bg-orange-500 w-full">
                topnav
            </div>
            <div class=" flex-1 relative z-0 overflow-y-auto   bg-green-500 h-screen">
                content
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3"></div>
                <div class="h-10 bg-white m-3">Last One</div>

            </div>

        </div>
    </div>

</div>

https://jsfiddle.net/sg7aqxv9/5/

1 Ответ

1 голос
/ 11 марта 2020

Вы используете алгоритм минимального размера flexbox, который приводит к переполнению макета. Подробное объяснение см. В этом сообщении:

Вам также мешают с помощью функции overflow, которая требует фиксированной длины, чтобы фактически что-то переполнять. Смотрите этот пост:

Принимая во внимание эти факторы, вам просто нужно добавить это к вашему код: 

.main-container {
   display: flex;
   flex-direction: column;
   /* overflow: hidden is not necessary */
}

.secondary-container {
   overflow: auto;
}

.tertiary-container {
   display: flex;
   flex-direction: column;
}

исправленная демоверсия

...