Firefox overflow-y 绝对定位 div

Question

我遇到了一个找不到解决方案的问题：

滚动条在 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

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

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

Answer 1

.start{
  padding-right: 20px;
  width:50%;
  word-break:break-word;
}

您的问题在 Firefox 上已解决。 :)

Firefox overflow-y 绝对定位 div

Firefox overflow-y in a absolute positioned div

css

cross-browser

overflow