Scrollable panel feature in Flexbox

Question

Scrollable panel feature in Flexbox

I am attempting to create a design that expands to fill the screen, but allows for scrolling when the content exceeds the available space.

My current approach using basic flexbox, as suggested in this answer, successfully fills the screen. However, overflowing content causes the entire screen to scroll instead of just the content's container.

If I manually set a height like 200px for .outer, I achieve the desired scrolling behavior, but the bottom pane no longer occupies the full screen.

Alternate methods such as using display: table resulted in the same issue as flexbox.

I also considered adjusting the height of the content pane with calc, such as:

height: calc(100% - 60px);

However, since the header's height can vary, a fixed value for the calculation is not possible.

I am seeking a CSS-only solution and would prefer to avoid JavaScript window sizing.

html css flexbox

Answer 1

Answer №1

It appears that the behavior aligns with your expectations.

html,
body {
  height: 100%;
  widht: 100%;
}

body {
  margin: 0;
  padding: 0;
}

.box {
  display: flex;
  flex-flow: column;
  flex-wrap: nowrap;
  height: 100%;
}
.box .row {
  border: 1px dotted grey;
  flex: 0 0 auto;
  overflow: auto;
}
.box .row.header {
  background: aliceblue;
}
.box .row.content {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column;
  flex-wrap: nowrap;
  background: pink;
}
.box .row.content .title {
  height: 40px;
  background: yellow;
  flex: 0 0 auto;
}
.text {
  height: 100px;
  margin-top: 10px;
  border: 1px solid gold;
}
.outer {
  height: 100%;
  flex: 1 1 auto;
  overflow-y: auto;
}
.inner {
  height: 100%;
}

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <div class="title">
      <b>content</b>
      (fills remaining space)
    </div>

    <div class="outer">

      <div class="inner">
        <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div>
        <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div>
        <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div>
        <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div>
        <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div>
        <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div>
        <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div>

      </div>
      <!-- inner -->

    </div>
    <!-- outer -->


  </div>
</div>

Answer 2

It appears that the behavior aligns with your expectations.

html,
body {
  height: 100%;
  widht: 100%;
}

body {
  margin: 0;
  padding: 0;
}

.box {
  display: flex;
  flex-flow: column;
  flex-wrap: nowrap;
  height: 100%;
}
.box .row {
  border: 1px dotted grey;
  flex: 0 0 auto;
  overflow: auto;
}
.box .row.header {
  background: aliceblue;
}
.box .row.content {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column;
  flex-wrap: nowrap;
  background: pink;
}
.box .row.content .title {
  height: 40px;
  background: yellow;
  flex: 0 0 auto;
}
.text {
  height: 100px;
  margin-top: 10px;
  border: 1px solid gold;
}
.outer {
  height: 100%;
  flex: 1 1 auto;
  overflow-y: auto;
}
.inner {
  height: 100%;
}

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <div class="title">
      <b>content</b>
      (fills remaining space)
    </div>

    <div class="outer">

      <div class="inner">
        <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div>
        <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div>
        <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div>
        <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div>
        <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div>
        <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div>
        <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div>

      </div>
      <!-- inner -->

    </div>
    <!-- outer -->


  </div>
</div>

Answer 3

Answer №2

The main idea behind this design is to understand the minimum size of a flex item:

4.5. Implied Minimum Size of Flex Items

In order to set a more sensible default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1.

In simpler terms, by default, a flex item will never be smaller than its content size.

Initial settings on a flex item:

min-width: auto;
min-height: auto;

This may result in items overflowing their container.

To address this issue, apply min-width: 0 for horizontal scrolling, and min-height: 0 for vertical scrolling, on the flex container.

Here is a basic demo using your code (the JS is used to duplicate the .text elements):

function multiplyNode(node, count, deep) {
    for (var i = 0, copy; i < count - 1; i++) {
        copy = node.cloneNode(deep);
        node.parentNode.insertBefore(copy, node);
    }
}

multiplyNode(document.querySelector('.text'), 10, true);

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  border: 1px solid black;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.header {
    background-color: aqua;
    flex: 0 0 auto;
}

.content {
    background-color: yellow;
    flex: 1;
    display: flex;              
    flex-direction: column;       
    min-height: 0;             
}

.outer {
    background-color: pink;
    flex: 1;
    overflow-y: auto;
}

.text {
  height: 100px;
  margin-top: 10px;
  border: 1px solid gold;
}

<div class="box">
     <div class="header">header (sized to content, i.e., height: auto;)</div>
     <div class="content">content (fills remaining space, i.e. flex: 1;)
          <div class="outer">
              <div class="inner">
                   <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div>
                   </div><!-- inner -->
          </div><!-- outer -->
     </div><!-- content -->
</div><!-- box -->

Tested on Chrome, FF, and IE11.

For additional details:

Why doesn't flex item shrink past content size?
Rendering problems using flexbox in Firefox and Chrome 48

Answer 4

The main idea behind this design is to understand the minimum size of a flex item:

4.5. Implied Minimum Size of Flex Items

In order to set a more sensible default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1.

In simpler terms, by default, a flex item will never be smaller than its content size.

Initial settings on a flex item:

min-width: auto;
min-height: auto;

This may result in items overflowing their container.

To address this issue, apply min-width: 0 for horizontal scrolling, and min-height: 0 for vertical scrolling, on the flex container.

Here is a basic demo using your code (the JS is used to duplicate the .text elements):

function multiplyNode(node, count, deep) {
    for (var i = 0, copy; i < count - 1; i++) {
        copy = node.cloneNode(deep);
        node.parentNode.insertBefore(copy, node);
    }
}

multiplyNode(document.querySelector('.text'), 10, true);

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  border: 1px solid black;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.header {
    background-color: aqua;
    flex: 0 0 auto;
}

.content {
    background-color: yellow;
    flex: 1;
    display: flex;              
    flex-direction: column;       
    min-height: 0;             
}

.outer {
    background-color: pink;
    flex: 1;
    overflow-y: auto;
}

.text {
  height: 100px;
  margin-top: 10px;
  border: 1px solid gold;
}

<div class="box">
     <div class="header">header (sized to content, i.e., height: auto;)</div>
     <div class="content">content (fills remaining space, i.e. flex: 1;)
          <div class="outer">
              <div class="inner">
                   <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div>
                   </div><!-- inner -->
          </div><!-- outer -->
     </div><!-- content -->
</div><!-- box -->

Tested on Chrome, FF, and IE11.

For additional details:

Why doesn't flex item shrink past content size?
Rendering problems using flexbox in Firefox and Chrome 48

Scrollable panel feature in Flexbox

Answer №1

Answer №2

Similar questions

Issue with text-nowrap not functioning as intended within Bootstrap 4.5 table cells

CSS unable to modify the color of the switch in HTML code

Incorporate gulp-clean-css into the current gulpfile.js

Guide on emphasizing a div when the page's validity is not true

Restoring text boxes to their original styling

Is there a way to change the images displayed in a JavaFXML Button?

Creating a full-width layout with CSS div

What is the best method for enlarging the central image in Owl Carousel?

Designing a navigation system that revolves around a central logo image

The most effective way to code overlapping html buttons

Positioning Images in Tailwind Modals

When a value is deleted from an input in jQuery, all other changes become void

Eliminate Bootstrap's validation glyphs

How can I show the HTML text "<ahref>" in a UITextView on iOS?

Is it advisable to utilize media queries and transform: translateY(-%) to position content above the mobile keyboard?

Exploring the world of JQuery Ajax selectors

Delete one object and then sequentially rename all remaining objects

Using Javascript to Conceal Button for Unauthenticated Users

Issues with Mouse Hover/Image Replacement

Struggling to retrieve a JSON object from an Express and Node application, only receiving an empty result