Flex容器垂直溢出父div [英] Flex container vertical overflowing parent div

问题描述

我目前正在尝试创建具有固定页眉和页脚以及动态内容区域的布局，该区域应使用剩余的垂直空间.内容包装器具有可以包含大量数据的内容容器，因此可以显示滚动条.

I´m currently trying to create yome kind of layout with fixed header and footer and an dynamic content area, which should use the remaining vertical space. The content-wrapper has a content container which can contain a lot of data, so a scrollbar can appear.

但是现在要解决的问题:如您所见，模拟页面高度的主包装器应停止在200px高度，但被内容容器拉伸了.

But now to the problem: as you can see, the main wrapper which simulates the page height, should stop at 200px height, but is being stretched by the content container.

我既不想在content-wrapper上使用max-height，也不想在content-wrapper上使用flex-shrink，因为这会通过在内容区域内移动页脚来弄乱布局，并允许它们重叠.

I don´t want to use a max-height at the content-wrapper and also can´t use flex-shrink on the content-wrapper because this would screw up the layout by moving the footer inside the content area and let them overlap.

因此，考虑到这一点，我如何创建一个具有动态内容区域的布局，该区域不会垂直扩展到无穷大，而是会占用页面的剩余空间并在内容包装器中显示提供的内容?

So with this in mind, how can I create a layout with a dynamic content area, which is not spreading vertical to infinity but takes the remaining space of the page and is displaying the provided content inside the content wrapper?

div.main-wrapper {
  height: 200px;
  max-height: 200px;
  min-height: 200px;
  width: 100%;
  min-width: 100%;
  display: flex;
  flex-direction: column;
  background: grey;
}

div.content-wrapper {
  flex: 1 0 auto;
}

div.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
}

div.header,
div.footer {
  height: 50px;
  max-height: 50px;
  min-height: 50px;
  background-color: green;
  min-width: 100%;
  width: 100%;
}

<div class="main-wrapper">
  <div class="header">FIXED HEADER</div>
  <div class="content-wrapper">
    <div class="content">
      DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
    </div>
  </div>
  <div class="footer">FIXED FOOTER</div>
</div>

我编辑了我的代码片段，以使其更接近我的实际问题，我正尝试简单地解决这一问题:如您所见，在内容包装器内部，还有另一个组件，我们将其视为黑盒，因为此布局应与内容包装器中的每个div一起使用，占用高度和宽度的100％.不应仅在内容或内容包装器内部添加溢出.目标是使内容包装容器占据剩余空间并限制包含的content-div，后者应占据内容包装的100％高度，而不推高主包装的高度.如您所见，在更新的代码段中，主包装明显大于200px，这是因为内容区域扩展了内容包装.因此，如何使用给定的参数解决问题，而不是在content-wrapper和内容黑盒div中不使用溢出属性.

I edited my snippet in order to get more close to my real problem, which I´m trying go simplyfy: As you can see inside the content wrapper, there is another component, let´s treat it as a black box since this layout should work with every div inside the content-wrapper, that takes up 100% height and width. There should not just be added an overflow inside content or content wrapper. The goal is to have the content wrapper container, which takes up the remaining space and limits the containing content-div, which should take up 100% height of the content wrapper and not pushing the height of the main-wrapper. As you can see at the updated snippet the main-wrapper is clearly larger than 200px due to the content area stretching the content-wrapper. So how to fix the problem with the given parameters of not using an overflow property inside content-wrapper and a content blackbox div.

推荐答案

只需应用:

div.content-wrapper {
  flex: 1;
  overflow: auto;
}

说明:

• flex: 1会占用所有可用的剩余空间.
• overflow: auto;会在需要时触发滚动条.

• flex: 1 it takes up all remaining space available.
• overflow: auto; it triggers the scrollbar when needed.

无需在div.content上应用任何内容来创建这种布局，也可以将其删除.参见以下简化:

There is no needs to apply anything on div.content for creating such layout, it can be removed too. See the simplified as follows:

div.main-wrapper {
  height: 200px;
  display: flex;
  flex-direction: column;
}

div.content-wrapper {
  flex: 1;
  overflow: auto;
  background: lightblue;
}

div.header,
div.footer {
  height: 50px;
  background: lightgreen;
}

<div class="main-wrapper">
  <div class="header">FIXED HEADER</div>
  <div class="content-wrapper">
      DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
      <br/>DYNAMIC CONTENT
  </div>
  <div class="footer">FIXED FOOTER</div>
</div>

这篇关于Flex容器垂直溢出父div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！