如何向flex项目的子项目添加滚动?-Howtoaddscrolltochildofflexitem?

4  

If you're applying overflow: auto to an element so it can launch a vertical scrollbar, then also give it a height limitation.

如果您正在应用溢出:auto到一个元素，那么它可以启动一个垂直滚动条，然后也给它一个高度限制。

In this case, you just need to add height: 100% to the element you want to make scrollable.

在这种情况下，您只需向要使可滚动的元素添加height: 100%。

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

Of course, you'll need to adjust the actual percentage value to subtract the height of the header. Maybe something like this:

当然，您需要调整实际的百分比值来减去header的高度。也许是这样的:

height: calc(100% - 80px)

OR, perhaps a better approach (and consistent with your added comments rejecting fixed heights), just make right-panel a column-direction flex container:

或者，也许有更好的方法(并与您所添加的拒绝固定高度的评论保持一致)，将右面板设置为一个列方向的flex容器:

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;
}

  left-panel
    
 (static)
  
    
      header
      
(static)
    
    
      content
        
(scrolls)
    
  

EDIT (based on revised question)

With regard to the overflow property:

关于溢出性质:

The overflow property specifies whether to clip content, render scrollbars or just display content when it overflows its block level container.

overflow属性指定在内容溢出块级容器时是剪辑内容、呈现滚动条还是仅仅显示内容。

In order for the overflow property to have an effect, the block level container must either have a bounding height (height or max-height) or have white-space set to nowrap.

为了使溢出属性具有效果，块级容器必须具有一个边界高度(高度或最大高度)或设置为nowrap的空白。

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

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

2  

Make your right-panel a column flexbox and add flex:1 to content-panel - see demo below:

将你的右面板设置为一个列flexbox，并在内容面板中添加flex:1——参见下面的演示:

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;
}

  left-panel
    
(static)
  
    
      header
      
(static)
    
    
      
        content
        
(scrolls)
        
more content here
        
more content here
        
more content here
        
more content here
        
more content here
        
more content here
        
more content here
        
more content here
        
more content here
      
    
  

0  

your content-panel already has height 1000px and your content has overflow:auto. The only thing you missed is you did not specify the content-panel height. content-panel height must <content height in order for it to display scroll bar

你的内容面板已经有了1000px的高度，你的内容已经溢出了:auto。您惟一遗漏的是没有指定内容面板的高度。内容面板高度必须小于内容高度才能显示滚动条

    
      content
      
(scrolls)