如何避免Flex布局内的Grid列被压缩？

要避免内容被压缩并实现横向滚动，只需对布局做两处关键修改：

• 给最外层的flex容器添加flex-nowrap和overflow-x-auto类
• 给每个Flex子容器添加flex-shrink-0类

修改后的完整代码 #

<div class="flex flex-nowrap overflow-x-auto">
  <div class="flex-shrink-0">
    <div class="border border-gray-300 text-center">1</div>
    <div class="grid grid-cols-5">
      <div class="border border-gray-200">1</div>
      <div class="border border-gray-200">2</div>
      <div class="border border-gray-200">3</div>
      <div class="border border-gray-200">4</div>
      <div class="border border-gray-200">5</div>
    </div>
  </div>
  <div class="flex-shrink-0">
    <div class="border border-gray-300 text-center">2</div>
    <div class="grid grid-cols-5">
      <div class="border border-gray-200">1</div>
      <div class="border border-gray-200">2</div>
      <div class="border border-gray-200">3</div>
      <div class="border border-gray-200">4</div>
      <div class="border border-gray-200">5</div>
    </div>
  </div>
  <div class="flex-shrink-0">
    <div class="border border-gray-300 text-center">3</div>
    <div class="grid grid-cols-5">
      <div class="border border-gray-200">1</div>
      <div class="border border-gray-200">2</div>
      <div class="border border-gray-200">3</div>
      <div class="border border-gray-200">4</div>
      <div class="border border-gray-200">5</div>
    </div>
  </div>
  <div class="flex-shrink-0">
    <div class="border border-gray-300 text-center">4</div>
    <div class="grid grid-cols-5">
      <div class="border border-gray-200">1</div>
      <div class="border border-gray-200">2</div>
      <div class="border border-gray-200">3</div>
      <div class="border border-gray-200">4</div>
      <div class="border border-gray-200">5</div>
    </div>
  </div>
  <div class="flex-shrink-0">
    <div class="border border-gray-300 text-center">5</div>
    <div class="grid grid-cols-5">
      <div class="border border-gray-200">1</div>
      <div class="border border-gray-200">2</div>
      <div class="border border-gray-200">3</div>
      <div class="border border-gray-200">4</div>
      <div class="border border-gray-200">5</div>
    </div>
  </div>
  <div class="flex-shrink-0">
    <div class="border border-gray-300 text-center">6</div>
    <div class="grid grid-cols-5">
      <div class="border border-gray-200">1</div>
      <div class="border border-gray-200">2</div>
      <div class="border border-gray-200">3</div>
      <div class="border border-gray-200">4</div>
      <div class="border border-gray-200">5</div>
    </div>
  </div>
  <div class="flex-shrink-0">
    <div class="border border-gray-300 text-center">7</div>
    <div class="grid grid-cols-5">
      <div class="border border-gray-200">1</div>
      <div class="border border-gray-200">2</div>
      <div class="border border-gray-200">3</div>
      <div class="border border-gray-200">4</div>
      <div class="border border-gray-200">5</div>
    </div>
  </div>
  <div class="flex-shrink-0">
    <div class="border border-gray-300 text-center">8</div>
    <div class="grid grid-cols-5">
      <div class="border border-gray-200">1</div>
      <div class="border border-gray-200">2</div>
      <div class="border border-gray-200">3</div>
      <div class="border border-gray-200">4</div>
      <div class="border border-gray-200">5</div>
    </div>
  </div>
  <div class="flex-shrink-0">
    <div class="border border-gray-300 text-center">9</div>
    <div class="grid grid-cols-5">
      <div class="border border-gray-200">1</div>
      <div class="border border-gray-200">2</div>
      <div class="border border-gray-200">3</div>
      <div class="border border-gray-200">4</div>
      <div class="border border-gray-200">5</div>
    </div>
  </div>
  <div class="flex-shrink-0">
    <div class="border border-gray-300 text-center">10</div>
    <div class="grid grid-cols-5">
      <div class="border border-gray-200">1</div>
      <div class="border border-gray-200">2</div>
      <div class="border border-gray-200">3</div>
      <div class="border border-gray-200">4</div>
      <div class="border border-gray-200">5</div>
    </div>
  </div>
  <div class="flex-shrink-0">
    <div class="border border-gray-300 text-center">11</div>
    <div class="grid grid-cols-5">
      <div class="border border-gray-200">1</div>
      <div class="border border-gray-200">2</div>
      <div class="border border-gray-200">3</div>
      <div class="border border-gray-200">4</div>
      <div class="border border-gray-200">5</div>
    </div>
  </div>
  <div class="flex-shrink-0">
    <div class="border border-gray-300 text-center">12</div>
    <div class="grid grid-cols-5">
      <div class="border border-gray-200">1</div>
      <div class="border border-gray-200">2</div>
      <div class="border border-gray-200">3</div>
      <div class="border border-gray-200">4</div>
      <div class="border border-gray-200">5</div>
    </div>
  </div>
</div>

关键类说明 #

• flex-nowrap：强制Flex子项保持在同一行，不会自动换行
• overflow-x-auto：当内容总宽度超过容器时，自动显示横向滚动条
• flex-shrink-0：禁止Flex子项被压缩，保留内部Grid布局的原始宽度

修改后，当内容总宽度超出页面边界时，会出现横向滚动条，所有子项的宽度都能保持，不会被压缩变形。

内容的提问来源于stack exchange，提问作者Alexander Zeitler