双水平滚动条显示出来，只有1希望

<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;">）。双水平滚动条显示出来，只有1希望

来源

2017-08-01 selten98

使用一个溢流而不是多个。当内容从预先定义的高度增加时，例如height：300px，overflow-y：auto会创建一个滚动条。与overflow-x相同：auto会在宽度从预定义宽度增加时创建一个滚动条。希望这可以解决你的问题。 – Aslam

@hunzaboy这并不能解决我的问题。我需要将两者都用于设计。 – selten98

你可以展示一个工作演示或你需要的模型吗？一个粗略的图像将工作得很好... – Aslam

我能够通过限制<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>

来源

2017-08-01 07:44:22 selten98

双水平滚动条显示出来，只有1希望

回答

相关问题