How to display scroll bar in flexible height with parent component is flex: 1-CodePudding

This is code example.

<main>
    <div >
      <div >header</div>
      <div >
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
      </div>
    </div>
</main>

.panel {
    flex: 1;
    width: 300px;
    display: flex;
    flex-direction: column;
    .content {
      flex: 1;
      background: #a1a1a1;
      overflow: auto;
      li {
          display: flex;
          align-items: center;
          height: 20vh;
      }
    }
}

More detail in codepen.io

I know it would be work with max-height:<number>px

But I want to panel's height flexible. How to display scroll bar on panel content only ?

CodePudding user response：

Firstly - your html is invalid - the only valid parent of an li is a ul

To answer your question - you need to set a height (in px / % / em / rem of an ancestor element and then just setting height to 100% on your content will allow it to have overflow.

.panel {
height: 10rem; 
overflow: hidden;
border: solid 1px blue
}

.header {
 padding: 8px 16px;
}
.content {
 height: 100%;
  border: solid 1px red;
  background: #a1a1a1;
  overflow: auto;
}

li {
    display: flex;
    align-items: center;
    height: 20vh;
    border: solid 1px black
}

<main>
    <div >
      <div >header</div>
      <div >
        <ul>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
          <li>test</li>
        </ul>
       </div>
    </div>
</main>