Firefox在绝对位置的div中溢出-y

编程问答 2022-08-16

问题描述

我有一个无法解决的问题：

在FireFox（69.0.3）和Chrome（77.0.3865.90）中滚动条的工作方式有所不同。 我有一个绝对位置包含一个div元素列表的div。我希望能够将最大高度设置为可以y滚动的列表。 碰巧列表中的元素包含应放置在容器相对侧的文本。

.pos-absolut {
  position: absolute;
  right: 0;
  background-color: lightblue;
}
.menuList {
  max-height: 100px;
  overflow-y: auto;
}
.elem{
  display: flex;
  justify-content: space-between
}
.start{
  padding-right: 20px;
}
<div class="pos-absolut">
      <div class="menuList">
        <div class="elem">
          <div class="start">Element</div>
          <div>1</div>
        </div>
        <div class="elem">
          <div class="start">Element</div>
          <div>2</div>
        </div>
        <div class="elem">
          <div class="start">Element</div>
          <div>3</div>
        </div>
        <div class="elem">
          <div class="start">ElementWithALongName</div>
          <div>4</div>
        </div>
        <div class="elem">
          <div class="start">Element</div>
          <div>5</div>
        </div>
        <div class="elem">
          <div class="start">Element</div>
          <div>6</div>
        </div>
      </div>
    </div>

以下是两种浏览器如何对此呈现不同的内容：

Chrome

FireFox

Chrome与Firefox

现在的问题是firefox渲染第四个元素的方式。我没有找到任何方法可以像在chrome中一样显示它。仅当我将容器设置为overflow-y:auto而不是overflow-y:scroll时。但是，如果这样做，在每种情况下滚动条都会在每个浏览器中都有一个滚动条，这是我不希望的。

有没有人有可行的解决方案，如何像chrome那样渲染行（不像屏幕截图那样遮挡行）并且没有副作用（例如overflow-y:scroll）？

解决方法

def get(self,request,*args,**kwargs): #or def list()
    data = request.GET.get('name')

您的问题已已解决，适用于Firefox。 ：）

overflow