Question

I have one div inside another. The inner div is larger than the outer div, and I want the outer div to scroll to show the hidden content. I marked it as overflow: auto and it works fine.

However, I also need scrollbars to appear on the outer div due to business constraints. This works in all browsers on Windows. It also works in Firefox on Mac. On Safari/Chrome on Mac I expect to see the scrollbars appear when I scroll the div’s content, just like they do when I scroll any web page. What happens instead is that I can scroll the content but scrollbars never appear. What do I have to do to get scrollbars to show up properly?

Here’s what I have:

<style type="text/css">
.inner {
    width: 300px;
    height: 300px;
}
.outer {
    width: 100px;
    height: 100px;
    overflow: auto;
}
</style>

<div class="outer">
<div class="inner">asdf qwer qwer asdf</div>
</div>

Answer 1

I wasn’t able to sort out why… but I went @HenrikAmmer’s answer. That’s good enough for my solution.