如何使列表末尾可见？答案

【问题标题】：How to make end of list visible?如何使列表末尾可见？
【发布时间】：2021-02-18 22:30:14
【问题描述】：

我列表中的最后一个元素被删除了。我可以从控制台日志中看到它正在渲染，如果我注释掉固定位置，我可以看到列表底部的元素。但是，由于某种原因，当我固定位置时我看不到它（我希望列表具有的行为）。

我呈现列表的文件（列表是 JobFeed）：

return (
  <div className="App">
    <div style={headerStyle}>
      <h3>header></h3>
      <ListsHeader state={state} dispatch={dispatch}/>
    </div>
    <div style={listContainerStyle}>
      <JobFeed state={state}/>
    </div>
  </div>
);

还有样式：

const headerStyle: CSS.Properties = {
  display: 'flex',
  flexDirection: 'row'
}

 const listContainerStyle: CSS.Properties = {
   scrollBehavior: 'smooth',
   maxHeight: '100vh',
   width: '100%',
   overflow: 'auto',
   position: 'fixed',
   margin: 0
 }

列表组件：

return (
    <ul style ={listStyle}>
      {activeJobs.map(item => {
        return(
          <li key={item.id}>
            <JobCard item={item}/>
          </li>
        )
      })}
    </ul>
  )

还有列表样式：

const listStyle: CSS.Properties = {
  display: 'flex',
  flexDirection: 'column',
  listStyleType: 'none',
  listStyle: 'none',
  paddingLeft: '26%',
  height: '100vh'
}

我正在使用 react、typescript 和 csstype 进行样式设置。

【问题讨论】：

<JobFeed state={state}/> 是什么在呈现您的截断列表？
是 JobFeed 呈现列表，其中最后一个被切断，除非我注释掉 listContainerStyle 中的位置
似乎是一个 CSS 问题，React 在这里可能没有发挥太大作用。发布生成的列表的 html，以便我们可以重现它。
我不知道该怎么做，但我会添加列表和样式
使用 Chrome 的开发者控制台。右键单击浏览器中的列表并点击“检查”

标签： css reactjs typescript

【解决方案1】：

由于某种原因，200px 太短了，对于列表样式，我添加了 250px 的 marginBottom 并解决了它。不知道为什么会这样。

【讨论】：