I’ve absolute positioned navigation gadgets inside a resizable container.
The issue is whenever you scrolled the overflow content material horizontally, the kid components (they’re absolute positioned due to they’re being rendered as virtualized listing so that they should be absolute) do not maintain their 100% width on scroll.
I am attaching a codepen content material that visualizes the problem beneath. Attempt to scroll proper the overflow content material and you will see.
physique {
font-family: system-ui;
background: #eee;
}
.menu-container {
place: relative;
width: 150px;
peak: 300px;
border: 2px strong #999;
overflow: auto;
}
.wrapper {
place: relative;
width: 100%;
peak: 100%;
background: #FFEDD8;
}
.menu-item {
show: flex;
align-items: middle;
place: absolute;
padding: 0 10px;
left: 0;
width: 100%;
min-width: 100%;
peak: 25px;
white-space: nowrap;
border: 1px strong #76ABAE;
background-color: #76ABAE;
font-weight: daring;
}<div class="menu-container">
<div class="wrapper">
<div class="menu-item" type="prime: 0">Dwelling</div>
<div class="menu-item" type="prime: 30px">Films</div>
<div class="menu-item" type="prime: 60px">Music</div>
<div class="menu-item" type="prime: 90px">Profile</div>
<div class="menu-item" type="prime: 120px">Contact Us</div>
<div class="menu-item" type="prime: 150px">There may be some lengthy content material</div>
</div>
</div> See the Pen
Resizable Left Menu by Metehan (@metehansenol)
on CodePen.
I anticipate a CSS answer that placeholders of kid components should be fulfill the scrollable space and all should be a identical measurement in line with essentially the most wider merchandise.
Essential reminder for individuals who are suggesting that cease positioning them as absolute, sadly it isn’t potential as a result of the listing is an output of virtualized listing.
Test the output of this listing if you want to know extra;
react-window
