When developing a React application, I encounter an issue with creating new components dynamically inside a container. The problem arises when the height of the container gets exceeded by the newly added items, and I aim to make the container scrollable in the Y direction to accommodate them. Despite trying to utilize overflow: 'auto', I have been unable to achieve the desired behavior. Any suggestions on how to tackle this?
SASS:
.v-timeline{ // parent component
flex: 1;
height: 100%;
width: 100%;
flex-wrap: nowrap;
.v-timeline-container { // main container
.v-timeline-indicator {
z-index: 2;
background-color: rgb(0, 105, 185);
width: 3px;
position: relative;
}
.v-timeline-items { // new items section
.v-timeline-item {
height: 60px;
}
}
}
}
The Component:
const [gridItems, setGridItems] = useState([{ id: 'firstItemID', info: 'firstItemInfo'}]);
const addRow = () => {
setGridItems([
...gridItems, {
id: uuidv4() ,
info: 'doesnt matter'
}
]);
}
return (
<>
<button onClick={addRow}>Add Row</button>
<div className='v-timeline-container' style={{ overflow: 'auto'}} >
{
gridItems.map(item => (
<div id={`thisTimeline${item.id}`} style={{ display: 'flex', overflow: 'scroll'}} key={`thisItem${item.id}`} className="v-timeline-items v-border">
<Indicator id={item.id} height={60}/>
<div>
<CustomItemContainer id={item.id} info={item.info}/>
</div>
</div>
))
}
</div>
</>
)
Initial State:
https://i.sstatic.net/lXd3L.png
New State: