Search code examples
htmlcssmaterialize

Dual horizontal scrollbar shows up, only 1 wanted

<div class="row">
    <div class="col s8">
        <div style="overflow-x: auto;">
            <!-- I get a horizontal scrollbar within this element ONLY -->
            <div style="margin-bottom: 5px; white-space: nowrap">
                <div class="treegen">1</div>
                <div class="treegen">2</div>
                <div class="treegen">3</div>
                <div class="treegen">4</div>
                <div class="treegen">5</div>
            </div>
            <div style="overflow-y: auto; min-height: 100px; max-height: 350px;">
                <!-- I get a horizontal scrollbar at this element too... -->
                <ul class="tree"> <!-- very wide element -->
                    DATA IN THE UL
                </ul>
            </div>
        </div>
    </div>
</div>

I'm trying to get a single scrollbar, only on the element that has overflow-x: auto;, however I also get it on the element with the tree class (or it's parent). I don't want that second scrollbar. I want the height scrolling on the 'tree' or its parent but the width scrolling I want that to be done at the same time on both the divs (<div style="margin-bottom: 5px; white-space: nowrap"> and <div style="overflow-y: auto; min-height: 100px; max-height: 350px;">).

Solution

  • I was able to fix it by limiting the div that the <ul class="tree"> is in by the width of the other div (<div style="margin-bottom: 5px; white-space: nowrap">).

    Result (when limited to 500px):

    <div class="row">
    <div class="col s8">
        <div style="overflow-x: auto;">
            <!-- I get a horizontal scrollbar within this element ONLY -->
            <div style="margin-bottom: 5px; white-space: nowrap">
                <div class="treegen">1</div>
                <div class="treegen">2</div>
                <div class="treegen">3</div>
                <div class="treegen">4</div>
                <div class="treegen">5</div>
            </div>
            <div style="overflow-y: auto; min-height: 100px; max-height: 350px; width: 500px;">
                <!-- I get a horizontal scrollbar at this element too... -->
                <ul class="tree"> <!-- very wide element -->
                    DATA IN THE UL
                </ul>
            </div>
        </div>
    </div>
</div>