时间戳

首页 > 解决方案 > Firefox 在绝对定位的 div 中溢出-y

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

问题描述

我有一个我无法找到解决方案的问题：

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

以下是两种浏览器的不同呈现方式：
铬合金 火狐

铬与火狐

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

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

标签： csscross-browseroverflow

解决方案

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

Firefox解决了您的问题。:)

推荐阅读