Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SimpleBar container width collapsed when used in absolutely positioned container

See original GitHub issue

Describe the bug SimpleBar container width is collapsing when used in floating (position: absolute) container.

To Reproduce Use SimpleBar component within floating div

Expected behavior Please correct me if I’m wrong, but from my understanding it should behave same as regular div with native overflow: hidden scroll property (adjust width to width of child elements, based on hardcoded css value or based on content).

Reproducible example https://stackblitz.com/edit/react-ts-stdesm Please check 2 boxes, red box is using native scroll, pink box is using SimpleBar component.

Your environment

Software	Version(s)
SimpleBar	5.1.0
Browser	Chrome 79.0.3945.79
npm/Yarn
Operating System	Linux

Issue Analytics

State:
Created 4 years ago
Comments:7 (1 by maintainers)

Top GitHub Comments

1reaction

Grsmtocommented, May 12, 2020

Fixed in latest version.

0reactions

danylo-holovenkocommented, Jul 12, 2022

@Grsmto Is there any solution to this issue?

Top Results From Across the Web

Position absolute box causes container to collapse

If the parent container that holds the absolute elements doesn't have an explicit height or width, it will collapse.

scrollbar - CSS-Tricks

::-webkit-scrollbar-thumb addresses the draggable scrolling element that resizes depending on the size of the scrollable element; ::-webkit- ...

Untitled

climateAtlasTooltip{padding:16px!important}.shadowed{-webkit-box-shadow:2px 4px ... video{position:absolute;top:0;left:0;width:100%;height:100%}.tag-list ...

Help - iTOL

Collapsed clades; Colored ranges display options; Dataset visibility and order in the legend box. Note that the zoom level and the position of...

Untitled

... .img-circle { border-radius: 50%; } .sr-only { position: absolute; width: 1px; ... background-clip: padding-box; } .obsolete .simplebar-track:hover ...