TailwindCSS — исправлена полная ширина div родителя flex

У меня есть шаблон ниже, созданный с помощью 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:

<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> превышает ширину родителя (# 1).

🤔 А знаете ли вы, что...
HTML5 предоставляет возможность создавать веб-приложения, работающие в автономном режиме, с использованием технологии Service Workers.

[РЕШЕНО]Перейти к решению

8 474

Html113619 вопросов Css75481 вопрос Tailwind css724 вопроса

Ответ:

Решено

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

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

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

https://play.tailwindcss.com/YPc9nuhM9z

TailwindCSS — исправлена ​​полная ширина div родителя flex

Ответ:

Интересные вопросы для изучения

TailwindCSS — исправлена полная ширина div родителя flex