Tailwind中Flex布局首列内容溢出父容器的解决请求

你的页脚第一列溢出父容器，核心原因是Flex子项默认的min-width: auto规则——它会阻止子元素收缩到小于自身内容的固有宽度，再加上第一列内部包含固定宽度的元素（如footer-logo的w-[10.6rem]）和左右margin（mr-12、ml-12），叠加后超出了basis-[40%]分配的空间。

你可以通过以下两步快速修复：

1. 给第一列的容器添加min-w-0类，允许Flex子项收缩到小于内容宽度；
2. 给第一列内部的内容容器添加overflow-hidden，确保文本和元素不会突破容器边界。

修改后的第一列代码： #

<!-- First col  -->
<div class="flex flex-col basis-[40%] border-2 border-White min-w-0">
  <div class="mr-12 overflow-hidden">
    <div class="flex">
      <%= image_tag "footer-logo.png", class: "h-[7.4rem] w-[10.6rem]", alt: "footer logo" %>
      <div class="ml-12 flex flex-col justify-between">
        <div class="flex space-x-2 items-center">
          <%= image_tag "phone.png", class: "w-[17px] h-[1rem] mr-1", alt: "phone icon" %>
          <div><p class="text-Vivd-Cerulean text-lg font-bold tracking-[-.27px]">0330 057 9957</p></div>
        </div>
        <div><p class="text-Amber text-lg font-semibold tracking-[-.27px]">info@aidhumanity.co.uk</p></div>
        <div class="flex justify-between items-center w-[10.3rem]">
          <%= image_tag "facebook.png", class: "w-[9px] h-[1rem]", alt: "facebook icon" %>
          <%= image_tag "twitter.png", class: "w-[20px] h-[17px]", alt: "twitter icon" %>
          <%= image_tag "instagram.png", class: "w-[25px] h-[25px]", alt: "instagram icon" %>
          <%= image_tag "linkedin.png", class: "w-[18px] h-[17px]", alt: "linkedin icon" %>
        </div>
      </div>
    </div>
    <p class="text-Bluish text-base font-medium leading-[26px] tracking-[-.24px] mt-6">Aid Humanity is proud to be a non-profit organization that passes 100% of our donations to charitable causes around the world.</p>
  </div>
  <div class="flex items-center mt-[4rem]">
    <span class="text-xs text-White opacity-50 font-medium mr-2">Registered with</span>
    <%= image_tag "regulator.png", class: "w-[7.5rem] h-[2.25rem] mix-blend-luminosity", alt: "regulator icon" %>
  </div>
</div>

额外优化建议： #

如果在小屏幕下固定宽度元素仍有溢出风险，可以给这些元素添加响应式宽度类，比如将w-[10.6rem]改为md:w-[10.6rem] w-full，让元素在移动端自动适配容器宽度。

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