TailwindCSS - 修复了 div flex parent 的全宽

Question

我使用 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>

下面请看fiddle我创建了here.

我遇到的问题是这两个 divs:

<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>

我想在底部有两个 links（Link #1 和 Link #2 在我的例子中），它们有一个固定的位置。每个 link 的宽度应占父 div.

的 50%

正如您在上面发布的示例中看到的那样，两个底部的宽度 <div> 超过了父级 (#1) 的宽度。

Answer 1

我不确定这是否正是您想要的，但请看一下。

我认为部分问题是 flexbox 无法控制固定定位的项目。宽度也需要调整。此外，您应该固定容器的位置而不是每个单独的 link.

您可以使用类似的东西，但 fixed 元素通常位于这些容器之外，因为修复会将其从页面流中移除。

https://play.tailwindcss.com/YPc9nuhM9z

TailwindCSS - 修复了 div flex parent 的全宽

TailwindCSS - Fixed div full width of flex parent

html

css

tailwind-css