如何将深度嵌套的列表缩小到窗口中剩余的空间，以使页面不滚动但列表缩小并可以滚动

问题描述

这是解决方案。

CSS：

<div style={{display:'flex',alignItems:'center'}}>
       <HomeIcon/>
       <Tab label="Home" />
</div>

注意：

100vh，100vw表示视口高度和宽度的100％。

高度：100％；子元素中的总是相对于直接父元素，如果直接父元素没有指定100％的高度，则不会执行任何操作。这就是为什么我必须指定高度：100％;在.playlist-container和.playlist-row中。

身体的位置：相对； .playlist-page具有position：absolute;因为在React中，.playlist-page不会是身体的直接子元素，并且我们将无法设置高度：100％;对于所有的亲生父母。

flexshrink：1；需要最小高度：0；和最大高度：100％；迫使元素缩小到小于其内容的大小。

HTML：

html {
  height: 100vh;
  width: 100vw;
}

body {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.playlist-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  position: absolute;
}

.playlist-header {
  flex-shrink: 0;
}

.playlist-fill {
  flex-shrink: 1;
  min-height: 0;
  max-height: 100%;
}

.playlist-container {
  height: 100%;
}

.playlist-row {
  height: 100%;
}

.playlist-pane {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.playlist-pane-header {
  flex-shrink: 0;
}

.playlist-list {
  flex-shrink: 1;
  min-height: 0;
  max-height: 100%;
  overflow: auto;
  border-style: solid;
  border-color: blue;
}

可执行文件：

https://codesandbox.io/s/long-leftpad-ltx97

在新窗口中打开预览并垂直调整其大小。当列表框的内容比页面高时，将显示滚动条。

解决方法

再次提供解决方案，我必须输入至少30个字符。

https://codesandbox.io/s/long-leftpad-ltx97