CODEWITHSUNDEEP
cssresponsive-designcss-positionabsolutereact-virtualized
Metehan Senol
Metehan Senol

Reputation: 669

CSS Scrolling overflow content issue with absolute positioned items

I have absolute positioned navigation items within a resizable container.

The problem is when you scrolled the overflow content horizontally, the child elements (they're absolute positioned because of they're being rendered as virtualized list so they must be absolute) don't keep their 100% width on scroll.

I'm attaching a codepen content that visualizes the issue below. Try to scroll right the overflow content and you'll see.

body {
    font-family: system-ui;
    background: #eee;
}
.menu-container {
    position: relative;
    width: 150px;
    height: 300px;
    border: 2px solid #999;
    overflow: auto;
}
.wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background: #FFEDD8;
}
.menu-item {
    display: flex;
    align-items: center;
    position: absolute;
    padding: 0 10px;
    left: 0;
    width: 100%;
    min-width: 100%;
    height: 25px;
    white-space: nowrap;
    border: 1px solid #76ABAE;
    background-color: #76ABAE;
    font-weight: bold;
}
<div class="menu-container">
    <div class="wrapper">
        <div class="menu-item" style="top: 0">Home</div>
        <div class="menu-item" style="top: 30px">Movies</div>
        <div class="menu-item" style="top: 60px">Music</div>
        <div class="menu-item" style="top: 90px">Profile</div>
        <div class="menu-item" style="top: 120px">Contact Us</div>
        <div class="menu-item" style="top: 150px">There is some long content</div>
    </div>
</div>

See the Pen Resizable Left Menu by Metehan (@metehansenol) on CodePen.

Checked the solutions those associated with my question but they're not same. There is a dynamic resizable overflow content and absolute positioned virtual list items here so it's different. It's about dynamic width of child elements not height.

I expect a CSS solution that the placeholders of child elements must be fulfill the scrollable area and all of items must have the same size with the most wider item.

Important reminder for those who are suggesting that stop positioning them as absolute, unfortunately it's not possible because the list is an output of virtualized list.

Check the output of this list if you need to know more; react-window

Upvotes: 0

Views: 80

Answers (0)

Related Questions