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.

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.

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>

EDIT:
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.

回答1:

Just apply:

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

Explanation:

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

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>

回答2:

If you are going to incorporate further columning within your content. I strongly reccomend you use css grid for this. It will allow for much more control and flexibility.

As per the specification.

CSS Grid defines a two-dimensional grid-based layout system.

Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions.

Example

grid-template-rows: 50px 100px 50px;

You can use the fr unit to a fraction of the available space. This is similar to auto.

You can even use minmax(100px, 1fr); to set the upper and lower limits of the height.

div.main-wrapper {
  width: 100%;
  display: grid;
  grid-template-rows: 50px 100px 50px;
  background: grey;
}

.content {
  padding: 10px;
  background-color: red;
  overflow-y: auto;
}

.header,
.footer {
  background-color: green;
}

<div class="main-wrapper">
  <div class="header">FIXED HEADER</div>
  <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 class="footer">FIXED FOOTER</div>
</div>

来源：https://stackoverflow.com/questions/51728855/flex-container-vertical-overflowing-parent-div

标签

html

css

css3

flexbox