I'm experiencing an issue where the last element in my list is getting cut off. When I check the console logs, I can see that it's rendering properly. If I remove the 'position: fixed' style, I can see the element at the bottom of the list. However, when I apply the fixed position (which is the desired behavior for the list), the element becomes invisible.
This is the file where I render the list (the list is called 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>
);
Here are the styles being used:
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 looks like this:
return (
<ul style ={listStyle}>
{activeJobs.map(item => {
return(
<li key={item.id}>
<JobCard item={item}/>
</li>
)
})}
</ul>
)
And the corresponding styling for the list:
const listStyle: CSS.Properties = {
display: 'flex',
flexDirection: 'column',
listStyleType: 'none',
listStyle: 'none',
paddingLeft: '26%',
height: '100vh'
}
I am using React, TypeScript, and CSSType for the styling.