0

The traditional fix for this issue, in this instance - is not working for me. The vertical scroll bar persists. See below:

.outer {
 overflow: hidden;
}
.inner {
 overflow: auto;
}

enter image description here


I need all the divs in my navigation. I've attempted to add the outer and inner overflow attribute at several levels of the parent/child div relations. None of which seem to be working. Here is my div tree:

<div>navbar-main
 <div>nav-items
  <div>list-items
   <div>ng-scope
    <div>ng-scope
     <div>sub-menu


There does not appear to be any conflicting code that would stop overflow from working.

3
  • what do you mean by "exception on IE / Firefox"
    – HarrisJT
    Commented Nov 29, 2016 at 17:11
  • There's an exception to the rule where it works on Chrome. I revised the title, it was confusing.
    – Womble
    Commented Nov 29, 2016 at 17:12
  • Try adding white-space: nowrap to outer div or wrapper which wraps entire container. If its not working pls post entire html code
    – Ajaykumar
    Commented Nov 29, 2016 at 19:27

1 Answer 1

1

It looks like the fiddle successfully works because the scrollbar of the inner #scroller div is being hidden by the outer #wrapper div. Notice that #scroller is 20px wider than #wrapper. Try setting widths for your divs, making the inner div wider than the outer, and see if that gives you the result you're looking for.

2
  • 1
    Your comment gave me some insight about how this works. After removing width: 100% from my .list-items div, I was able to add a hard set width to a child <ul>, resolving the issue. Thanks!
    – Womble
    Commented Nov 29, 2016 at 20:56
  • Great, glad I could help!
    – olgark
    Commented Nov 29, 2016 at 21:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.