不使用flex-direction:column实现Flex项目填充剩余高度

解决方案 #

问题出在当前Flex容器的配置和布局结构上，调整后即可让main填充剩余高度：

1. 修正主容器样式
   移除干扰布局的属性并让容器撑满页面高度：

   .ctm .grail {
       display: flex;
       flex-direction: column;
       /* 移除wrap属性，避免元素换行打乱垂直布局 */
       /* flex-wrap: wrap; */
       justify-content: flex-start;
       /* 移除align-content，单行垂直布局无需该属性 */
       /* align-content: space-between; */
       gap: var(--ctm-gap, 1em);
       height: 100%; /* 继承body的100vh高度，确保布局撑满视口 */
   }
   

2. 优化HTML结构
   将左右aside与main包裹在一个容器中，实现水平排列并让该容器填充剩余垂直空间：

   <body class="grail">
       <details>
           <summary>Notification</summary>
           <p>Details</p>
       </details>
       <header>Header</header>
       <nav>Navigation</nav>
       <!-- 新增中间容器 -->
       <div class="middle-section">
           <aside>Left</aside>
           <main>Main</main>
           <aside>Right</aside>
       </div>
       <footer>Footer</footer>
   </body>
   

3. 设置中间容器及内部元素样式

   /* 让中间区域填充剩余垂直高度 */
   .ctm .grail > .middle-section {
       display: flex;
       flex-grow: 1;
       gap: var(--ctm-gap, 1em);
   }
   
   /* 保留main的宽度占比 */
   .ctm .grail > .middle-section > main {
       flex-grow: 3;
   }
   
   /* 左右aside样式 */
   .ctm .grail > .middle-section > aside {
       flex-grow: 1;
       min-width: min(6em, 100%);
   }
   
   /* 移除顶部/底部元素的flex-basis:100%，避免高度溢出 */
   .ctm .grail>details,
   .ctm .grail>header,
   .ctm .grail>nav,
   .ctm .grail>footer {
       /* flex-basis: 100%; */
   }
   

原理 #

• 主容器设置height:100%后，继承body的min-height:100vh，确保整个布局撑满视口高度。
• middle-section通过flex-grow:1自动占据details、header、nav、footer之外的剩余垂直空间。
• 内部Flex布局让main在水平方向占比更大，同时因middle-section高度已撑满剩余空间，main的高度也会自动填充该区域。

此方案无需依赖固定高度、百分比或calc，完美适配动态高度的头部和底部元素。

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