-webkit-fill-available未按预期工作。div 垂直滚动条的顶部和底部不正确

Question

我的页面在顶部包含一个固定的搜索框，其中包含文本的div。我希望DIV的高度是窗口的其余部分（减去搜索框）。DIV具有垂直滚动条，因为文本的文本多于其适合其中的文字。https://codesandbox.io/s/pjok544nrx

我试图通过将DIV的高度设置为-Web-Fill-fill可用，但是DIV的高度太大，它延伸到窗户底部以下。因此，您无法使用卷轴滚动到文本的底部。它似乎正在使用整个窗口的高度，而不是减去搜索框的高度。

我也尝试使用Flex，但也无法弄清楚这种方法。

我该如何工作？

Answer 1

flex解决了它。https://codesandbox.io/s/pjok544nrx

有关更多信息，请参阅此

styles.css

body {
  margin:0; /* adding flex created a margin somehow */
  overflow-y: hidden;  /* suppresses the page's vertical scrollbar */
}
.container {
  display: flex;
  flex-flow: column nowrap;
  height: 100vh;
}
.heading {
  font-size: 20px;
  background-color: white;
}
.fruits-list {
  overflow: scroll;  /* scroll enables inertial scrolling. auto doesn't */
  -webkit-overflow-scrolling: touch;
  padding: 20px;
}
.buffer {
  height: 600px;   /* Putting a buffer div after the list works better than 
                      setting padding-bottom on the list div which causes
                      the list div and its scroll bar to extend below the 
                      bottom of the window when the window is short. It should 
                      be set to more than the tallest the window can be. */
}

index.html

      <div className="container">
        <div className="heading">
          <Select
            ...
          />
        </div>
        <div className="fruits-list">
          {searchOptions.map(option => {
            return (
              <div key={option.value} id={option.value}>
                {option.label}
                ...
              </div>
            );
          })}
          <div className="buffer"></div>
        </div>
      </div>