使用 Flexbox 和水平滚动条时行不会增长到全宽

Question

我正在使用弹性盒构建一个表格，第一个单元格是该行的标题。该行中的其他单元格是固定宽度的。

我还想要一个带有背景的标题行，而不是跨越整个宽度。

它看起来像这样：

以及相应的代码（使用tailwind，但这实际上是一个CSS问题）：

<div class="flex flex-col overflow-x-auto p-4">
  <div class="flex bg-gray-300">
    <div class="min-w-40 grow">Header row</div>
  </div>
  <div class="flex">
    <div class="min-w-40 grow">Header cell</div>
    <div class="w-12 flex-none">2.5</div>
    <div class="w-12 flex-none">2.5</div>
    <div class="w-12 flex-none">2.5</div>
    <div class="w-12 flex-none">2.5</div>
    <div class="w-12 flex-none">2.5</div>
    <div class="w-12 flex-none">2.5</div>
    <div class="w-12 flex-none">2.5</div>
    <div class="w-12 flex-none">2.5</div>
    <div class="w-12 flex-none">2.5</div>
    <div class="w-12 flex-none">2.5</div>
  </div>
</div>

也在顺风的游乐场。

当屏幕尺寸发生变化时，多余和删除的空间被第一列吸收，因此成为

grow

类，在一定程度上，因此成为

min-w-40

类。

当屏幕尺寸太小时，会出现水平滚动条。

问题是标题行的背景并没有一直到行的末尾，它在末尾之前停止。

我该如何解决这个问题？更重要的是，我不明白为什么，所以我希望得到解释！

Answer 1

第一个容器遵守文档的网格宽度。下面的孩子被应用了宽度的孩子们推到了极限之外，但第一个孩子对此一无所知。

玩了一下以下内容：

<div class="flex flex-col overflow-x-auto p-4">
  <div class="flex bg-gray-300">
    <div class="min-w-40 grow">Header row</div>
  </div>
  <div class="flex">
    <div class="min-w-40 grow">Header cell</div>
    <div class="flex overflow-scroll">
      <div class="w-12 flex-none">2.5</div>
      <div class="w-12 flex-none">2.5</div>
      <div class="w-12 flex-none">2.5</div>
      <div class="w-12 flex-none">2.5</div>
      <div class="w-12 flex-none">2.5</div>
      <div class="w-12 flex-none">2.5</div>
      <div class="w-12 flex-none">2.5</div>
      <div class="w-12 flex-none">2.5</div>
      <div class="w-12 flex-none">2.5</div>
      <div class="w-12 flex-none">2.5</div>
    </div>
  </div>
</div>

https://play.tailwindcss.com/0zSZt8KTs9

好多了！