当兄弟元素溢出时，如何让Header宽度匹配兄弟元素？

我当前的代码展示了一个包含header和内容div的容器。我希望当兄弟元素溢出时，header的宽度能匹配兄弟元素的宽度。我原本以为flex-1可以实现，但并未生效，请问该如何解决？

原代码：

<div class="flex w-[500px] flex-col overflow-x-auto bg-red-300">
  <h1 class="flex-1 bg-orange-300">Header</h1>
  <div class="h-96 w-[750px] bg-green-300">Content</div>
</div>

在flex-col（垂直方向Flex布局）中，flex-1的作用是控制元素高度（占据容器剩余垂直空间），而非宽度。默认情况下，Flex列布局的子元素宽度会被限制在容器的设定宽度内，无法自动跟随溢出的兄弟元素扩展。

方案1：改用inline-flex并设置最小宽度 #

将外层容器的flex改为inline-flex，让容器宽度由内容决定，同时保留min-w-[500px]确保内容较小时容器仍有基础宽度：

<div class="inline-flex min-w-[500px] flex-col overflow-x-auto bg-red-300">
  <h1 class="bg-orange-300">Header</h1>
  <div class="h-96 w-[750px] bg-green-300">Content</div>
</div>

方案2：使用Grid布局替代Flex #

Grid布局默认会让列宽适配内容宽度，能更直观地实现需求：

<div class="grid min-w-[500px] overflow-x-auto bg-red-300">
  <h1 class="bg-orange-300">Header</h1>
  <div class="h-96 w-[750px] bg-green-300">Content</div>
</div>

方案3：给Header添加宽度适配属性 #

如果要保留原Flex布局结构，可给Header添加min-w-full，同时让容器基于内容宽度渲染（搭配inline-flex）：

<div class="inline-flex min-w-[500px] flex-col overflow-x-auto bg-red-300">
  <h1 class="min-w-full bg-orange-300">Header</h1>
  <div class="h-96 w-[750px] bg-green-300">Content</div>
</div>

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