html - 出现双水平滚动条，只需要 1 个

Question

<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>

我试图获得一个滚动条，仅在具有 overflow-x: auto; 的元素上，但是我也在具有树类(或其父级)的元素上获取它。我不想要第二个滚动条。我希望在“树”或其父级上滚动高度，但我希望在两个 div(<div style="margin-bottom: 5px; white-space: nowrap"> 和 <div style="overflow-y: auto; min-height: 100px; max-height: 350px;">)上同时进行宽度滚动。

Answer 1

我能够通过限制 <ul class="tree"> 的 div 来修复它位于另一个 div ( <div style="margin-bottom: 5px; white-space: nowrap">) 的宽度内。

结果(限制为 500 像素时):

<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>