How to make end of list visible? - css

Question

The last element in my list is being cut off. I can see from console logs that it's rendering and if I comment out the position from being fixed, I can see the element at the bottom of the list. However, for some reason, I cannot see it when I make the position fixed (the behavior I want the list to have).
File where I render the list (the list is 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>
);
And the styles:
const headerStyle: CSS.Properties = {
display: 'flex',
flexDirection: 'row'
}
const listContainerStyle: CSS.Properties = {
scrollBehavior: 'smooth',
maxHeight: '100vh',
width: '100%',
overflow: 'auto',
position: 'fixed',
margin: 0
}
The list component:
return (
<ul style ={listStyle}>
{activeJobs.map(item => {
return(
<li key={item.id}>
<JobCard item={item}/>
</li>
)
})}
</ul>
)
And the list style:
const listStyle: CSS.Properties = {
display: 'flex',
flexDirection: 'column',
listStyleType: 'none',
listStyle: 'none',
paddingLeft: '26%',
height: '100vh'
}
I'm using react, typescript, and csstype for the styling.

Answer 1

For some reason it was like 200px too short, for the list style I added a marginBottom of 250px and that solved it. Not sure why that happened.