嵌套项目应滚动，而不是其容器

问题描述

我正在进行如下设置：

selectedTabKey

当外部div的内容溢出时，我希望选项卡的内容可滚动。

如果我将第一个子div设置为<div style="display: flex; flex-direction: column; height: 500px"> <div> <div>Tab menu</div> <div>Tab content</div> </div> <div>Content of item 2</div> <div>Content of item 3</div> </div>，则选项卡菜单和选项卡内容都是可滚动内容的一部分，但我只希望选项卡内容可滚动。

解决方法

如果我将第一个子div设置为overflow: auto，则选项卡菜单和选项卡内容都是可滚动内容的一部分，但我只希望选项卡内容可滚动。

是的，因为标签菜单和标签内容都在同一个容器中。

如果仅希望标签内容可滚动，则将该内容隔离在其自己的容器中。

最后，如果您不想使用其他固定高度，请使用嵌套的flex容器。

#container {
  display: inline-flex;
  flex-direction: column;
  height: 150px;
  border: 1px solid red;
}

#tab-info {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#tab-content {
  overflow: auto;
}

<div id="container">
  <div id="tab-info">
    <div>Tab menu</div>
    <div id="tab-content">
      <div>Tab content</div>
      <div>Tab content</div>
      <div>Tab content</div>
      <div>Tab content</div>
      <div>Tab content</div>
      <div>Tab content</div>
      <div>Tab content</div>
      <div>Tab content</div>
      <div>Tab content</div>
      <div>Tab content</div>
    </div>
  </div>
  <div>Content of item 2</div>
  <div>Content of item 3</div>
</div>

,

在这种情况下，请将Tab Conetnt div保持固定高度，并保持其溢出：自动。