如何让flex-grow布局适配移动端，实现垂直排列与固定高度？

直接给你调整好的代码，采用Tailwind的mobile-first响应式思路，完美适配大小屏：

<div class="min-h-screen flex flex-col">
  <div class='bg-blue-700 px-8 flex items-center justify-between py-4 text-white'> Top </div>
  <!-- 小屏默认垂直排列，大屏切换为横向并占满剩余空间 -->
  <div class='relative flex flex-col md:flex md:flex-grow'>
    <!-- 小屏满宽+固定400px高，大屏恢复原宽度+自适应高度 -->
    <nav class='bg-white w-full h-[400px] md:w-1/2 md:h-auto'> Left </nav>
    <!-- 小屏满宽+固定400px高，大屏占剩余宽度+自适应高度 -->
    <main class='bg-gray-100 w-full h-[400px] md:flex-1 md:h-auto'> Right </main>
  </div>
  <div class='h-20 bg-red-200'> </div>
</div>

关键修改说明 #

• 小屏默认样式：中间容器设为flex-col垂直排列，左右区域用w-full占满宽度，h-[400px]固定高度，完全符合你要的移动端效果
• 大屏适配：通过md:前缀（默认对应768px以上屏幕），给中间容器恢复flex横向排列和flex-grow占满上下栏剩余空间；同时给左右区域重置高度为md:h-auto，宽度设回原布局的md:w-1/2和md:flex-1
• 避免了媒体查询优先级冲突问题，完全用Tailwind原生响应式类实现，更简洁易维护

如果需要自定义断点（比如不是768px），可以在Tailwind配置文件里修改theme.screens，或者用自定义媒体查询类，但原生响应式类足够覆盖大部分场景。

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