flexbox布局：占用剩余空间，但不要扩展超过100%的剩余空间[重复]答案

【问题标题】：flexbox layout: take remaining space but do not expand more than 100% of remaining space [duplicate]flexbox布局：占用剩余空间，但不要扩展超过100%的剩余空间[重复]
【发布时间】：2023-03-29 09:08:01
【问题描述】：

我有以下代码。我希望第二个 div 占用页面的剩余空间，并允许内部内容在溢出时滚动。但它似乎不起作用。

<div style="max-height: 100vh; height: 100vh">
    <div style="height: 100%; display: flex; flex-direction: column">
       <div style="flex: 0 1 auto">
          This is some fixed heighted content
       </div>
       <div style="flex: 1 1 0%; overflow: auto">
          A lot of text content here that overflows the remaining space.
          So this div should take up the remaining available space (100vh - space of div above) 
          and the inner content should become scrollable
          But it ends up expanding the div to the text content and thus the whole screen becomes 
          scrollable instead of just the div
       </div>
    </div>
</div>

任何帮助将不胜感激:)

【问题讨论】：

您的问题是由拼写错误引起的，您没有正确关闭第一个 div
@TemaniAfif 对不起，但这在我的实际代码中不存在。这只是我的代码的简化版本。我会改正错字

标签： html css flexbox

【解决方案1】：

您没有正确关闭您的 div <div/> 而不是 </div>，另外，可以使用较少的 CSS

body{margin:0}

<div style="height: 100vh; display: flex; flex-direction: column;">
   <div>
      This is some fixed heighted content
   </div>
   <div style="flex:1;overflow:auto;">
      A lot of text content here that overflows the remaining space.
      So this div should take up the remaining available space (100vh - space of div above) 
      and the inner content should become scrollable
      But it ends up expanding the div to the text content and thus the whole screen becomes 
      scrollable instead of just the divA lot of text content here that overflows the remaining space.
      So this div should take up the remaining available space (100vh - space of div above) 
      and the inner content should become scrollable
      But it ends up expanding the div to the text content and thus the whole screen becomes 
      scrollable instead of just the divA lot of text content here that overflows the remaining space.
      So this div should take up the remaining available space (100vh - space of div above) 
      and the inner content should become scrollable
      But it ends up expanding the div to the text content and thus the whole screen becomes 
      scrollable instead of just the divA lot of text content here that overflows the remaining space.
      So this div should take up the remaining available space (100vh - space of div above) 
      and the inner content should become scrollable
      But it ends up expanding the div to the text content and thus the whole screen becomes 
      scrollable instead of just the divA lot of text content here that overflows the remaining space.
      So this div should take up the remaining available space (100vh - space of div above) 
      and the inner content should become scrollable
      But it ends up expanding the div to the text content and thus the whole screen becomes 
      scrollable instead of just the divA lot of text content here that overflows the remaining space.
      So this div should take up the remaining available space (100vh - space of div above) 
      and the inner content should become scrollable
      But it ends up expanding the div to the text content and thus the whole screen becomes 
      scrollable instead of just the div
   </div>
</div>

【讨论】：

【解决方案2】：

此处可能需要“最大高度”css 属性

【讨论】：

【解决方案3】：

您在代码中的错误是您没有在末尾关闭 div 标签。

【讨论】：