TailwindCSS — исправлен div на всю ширину родительского элемента flex

#html #css #tailwind-css

#HTML #css #tailwind-css

Вопрос:

У меня есть приведенный ниже шаблон, созданный с помощью TailwindCSS:

 <body class="h-full">
  <div class="flex h-full">
    <div class="w-5/6">
      <div class="grid grid-rows-2 grid-flow-col h-full" style="grid-template-rows: 93.8% 6.2%;">
        <div class="relative bg-gray-200 h-full">1</div>
        <div class="bg-red-200">

            <!-- This area is where I have problems -->
            <div class="flex h-full">
              <div class="w-1/2 h-full">
                <div class="bg-blue-500 h-full fixed" style="width: inherit;">Link #1</div>
              </div>
              <div class="w-1/2 h-full">
                <div class="bg-green-500 h-full fixed" style="width: inherit;">Link #2</div>
              </div>
            </div>

        </div>
      </div>
    </div>
    <div class="w-1/6">
    <div class="grid grid-rows-2 grid-flow-col h-full" style="grid-template-rows: 20% 80%;">
                <div class="md:py-16 md:px-4 border-l border-gray-100 bg-gray-50">3
                </div>
                <div class="md:py-4 md:px-4 border-l border-t border-gray-100">4</div>
          </div>
    </div>
  </div>
</body>
 

Пожалуйста, посмотрите следующую скрипку, которую я создал здесь.

Проблема, с которой я столкнулся, связана с этими двумя разделениями:

 <div class="flex h-full">
    <div class="w-1/2 h-full">
         <div class="bg-blue-500 h-full fixed" style="width: inherit;">Link #1</div>
    </div>
    <div class="w-1/2 h-full">
         <div class="bg-green-500 h-full fixed" style="width: inherit;">Link #2</div>
   </div>
</div>
 

Я хочу, чтобы внизу были две ссылки (ссылка № 1 и ссылка № 2 в моем примере), которые имеют фиксированную позицию. Ширина каждой ссылки должна занимать 50% родительского div.

Как вы можете видеть в примере, опубликованном выше, ширина двух нижних <div> частей превышает ширину родительского элемента (# 1).

введите описание изображения здесь

Ответ №1:

Я не уверен, что это именно то, что вы хотели, но посмотрите.

Я думаю, что часть проблемы заключается в том, что flexbox не сможет управлять элементами с фиксированным расположением. Ширина тоже нуждалась в корректировке. Кроме того, вы должны скорее фиксировать положение контейнера, чем каждой отдельной ссылки.

Вы можете использовать что-то подобное, но fixed элементы обычно находятся за пределами этого контейнера, потому что исправление выводит его из потока страниц.

https://play.tailwindcss.com/YPc9nuhM9z