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;的元素上，但是我也在树类（或它的父级）的元素上得到它。我不想要第二个滚动条。我想在树上滚动高度＆＃39;或其父级，但宽度滚动我希望在两个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">）的宽度来修复它。

结果（限制为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>

双水平滚动条显示，只有1个想要

1 个答案: