How to add scroll to a flex item?

Question

With a flexible container with a fixed height, I can make the scrollable element scrollable by setting overflow: auto, for example:

page {
  display: flex;
  flex-flow: row wrap;
  height: 200px;
}
left-panel {
  flex: 1;
  display: block;
  background: lightblue;
}
//main {flex: 5; display: block;}
header {
  background: turquoise;
  display: block
}
//main-content-wrapper {flex: 4; display:flex; flex-direction: column}
right-panel {
  flex: 1;
  overflow: auto;
}
content-panel {
  background: pink;
  display: block;
}
content {
  height: 1000px;
  display: block;
}

<page>
  <left-panel>left-panel
    <br/>(static)</left-panel>
  <right-panel>
    <header>
      header
      <br/>(static)
    </header>
    <content-panel>
      <content>
        content
        <br/>(scrolls)
      </content>
    </content-panel>
  </right-panel>
</page>

Run codeHide result

fiddle

But I would like to make the child scroll element of the flex element.

I think setting height: 100%in the flex element and overflow: autoon the child I want to scroll will work, but it is not:

page {
  display: flex;
  flex-flow: row wrap;
  height: 200px;
}
left-panel {
  flex: 1;
  display: block;
  background: lightblue;
}
//main {flex: 5; display: block;}
header {
  background: turquoise;
  display: block
}
//main-content-wrapper {flex: 4; display:flex; flex-direction: column}
right-panel {
  flex: 1;
  height: 100%;
}
content-panel {
  background: pink;
  display: block;
  overflow: auto;
}
content {
  height: 1000px;
  display: block;
}

<page>
  <left-panel>left-panel
    <br/>(static)</left-panel>
  <right-panel>
    <header>
      header
      <br/>(static)
    </header>
    <content-panel>
      <content>content
        <br/>(scrolls)</content>
    </content-panel>
  </right-panel>
</page>

Run codeHide result

fiddle

How can I do this job?

And why does the second violin not work?

Added comments on OP:

• I see that there are several related issues, but the ones I found are either not directly applicable, or mention workarounds for errors that may have been fixed since then.

• I would like to avoid using explicit height calculations to reduce component coupling.

• flexbox flex-direction: column, .

• ( ) , , . flexbox - css?

Answer 1

overflow: auto , , .

height: 100% , .

content-panel {
  background: pink;
  display: block;
  overflow: auto;
  height: 100%; /* NEW */
}

, , . , - :

height: calc(100% - 80px)

, , ( , ), right-panel :

page {
  display: flex;
  flex-flow: row wrap;
  height: 200px;
}
left-panel {
  flex: 1;
  display: block;
  background: lightblue;
}
header {
  background: turquoise;
  display: block
}
right-panel {
  flex: 1;
  height: 100%;
  display: flex;          /* NEW */
  flex-direction: column; /* NEW */
}
content-panel {
  background: pink;
  overflow: auto;
}
content {
  height: 1000px;
  display: block;
}

<page>
  <left-panel>left-panel
    <br/> (static)</left-panel>
  <right-panel>
    <header>
      header
      <br/>(static)
    </header>
    <content-panel>
      <content>content
        <br/>(scrolls)</content>
    </content-panel>
  </right-panel>
</page>

Hide result

---

EDIT ( )

overflow:

overflow , -, , .

overflow , (height, max-height) white-space nowrap.

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Answer 2

right-panel flexbox flex:1 content-panel - . :

page {
  display: flex;
  flex-flow: row wrap;
  height: 200px;
}
left-panel {
  flex: 1;
  display:block;
  background: lightblue;
}
header {
  background: turquoise;
  display:block;
}
right-panel {
  flex: 1;
  display: flex;/*Added this*/
  flex-direction: column;/*Added this*/
  height: 100%;
}
content-panel {
  background: pink;
  display:block;
  overflow: auto;
  flex:1; /*Added this*/
}
content {
  display: block;
  height: 1000px;
}

<page>
  <left-panel>left-panel
    <br/>(static)</left-panel>
  <right-panel>
    <header>
      header
      <br/>(static)
    </header>
    <content-panel>
      <content>
        content
        <br/>(scrolls)
        <br/>more content here
        <br/>more content here
        <br/>more content here
        <br/>more content here
        <br/>more content here
        <br/>more content here
        <br/>more content here
        <br/>more content here
        <br/>more content here
      </content>
    </content-panel>
  </right-panel>
</page>

Hide result

Answer 3

yours content-panelalready has height 1000px, and yours contenthas overflow:auto. The only thing you missed is not to specify content-panel height. content-panel heightmust < content heightto display the scroll bar

<content-panel>
    <content>
      content
      </br>(scrolls)
    </content>
</content>