将 overflow-y 设置为可见，而 overflow-x 为自动，以便内容可以垂直溢出父容器

Question

我正在使用 position: absolute 和 position: relative 在图像上显示文本（如果鼠标悬停在图像上）。文本和图像父级 div 所在的容器设置为 overflow-x: auto，使其具有水平滚动条。

我希望显示的文本垂直溢出 #container 元素（和水平滚动条），但这并没有发生 - 相反，垂直滚动条是出现在容器中。

我不想让容器的高度扩展到文本的高度。

我试过将 overflow-y: visible 应用到 #container 但这并没有解决问题。如果我从 #container 中删除 overflow-x: auto 它可以解决问题，但是从 #container 中删除水平滚动条并将其放在 body 上（我不想要）

function textVisibility(name) {
  var p = document.getElementById(name);
  if (p.style.display == "block") {
    p.style.display = "none";
  } else {
    p.style.display = "block";
  }
}

.div {
  margin: 5px;
  flex: 0 0 100px;
  position: relative;
}

img {
  width: 70%;
}

p {
  margin: 0;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: none;
}

#container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
}

<div id="container">

  <div class="div" onmouseenter="textVisibility(1);" onmouseleave="textVisibility(1)">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p id="1">Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div" onmouseenter="textVisibility(2);" onmouseleave="textVisibility(2)">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p id="2">Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div" onmouseenter="textVisibility(3);" onmouseleave="textVisibility(3)">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p id="3">Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div" onmouseenter="textVisibility(4);" onmouseleave="textVisibility(4)">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p id="4">Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div" onmouseenter="textVisibility(5);" onmouseleave="textVisibility(5)">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p id="5">Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div" onmouseenter="textVisibility(6);" onmouseleave="textVisibility(6)">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p id="6">Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>

JsFiddle：https://jsfiddle.net/r3Lja69h/

Answer 1

如果你想 X 轴滚动和 Y 轴隐藏比你写 :-

overflow-x: auto;
overflow-y: hidden;

如果你想要 Y 轴滚动和 X 轴隐藏比你写：-

overflow-x: hidden;
overflow-y: auto;

如果你希望所有轴都可滚动，那么你可以这样写：-

overflow:auto;

隐藏所有轴：-

overflow: hidden;

Answer 2

如果 overflow-x 或 overflow-y 属性既不是 visible 也不是 clip，则 visible/clip 是分别计算为auto/hidden。

也就是说，如果你指定overflow-x: auto;，overflow-y 属性也会是auto（因为默认值是visible）。

3. Scrolling and Clipping Overflow: the overflow-x, overflow-y, and overflow properties^ref

as specified, except with visible/clip computing to auto/hidden (respectively) if one of overflow-x or overflow-y is neither visible nor clip

一种解决方案是使图像而不是文本的绝对位置，以便文本确定容器的高度。

.div {
  margin: 5px;
  flex: 0 0 100px;
  position: relative;
}

img {
  width: 70%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

p {
  margin: 0;
}

#container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
}

<div id="container">

  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>

</div>


<button onclick="toggleText();">Click me
</button>

Answer 3

考虑使用position:fixed悬停时动态调整位置：

document.querySelectorAll('.div').forEach((div) => {
  div.addEventListener('mouseover', () => {
      var r = div.getBoundingClientRect();
      div.style.setProperty("--t", r.top+"px");
      div.style.setProperty("--l", r.left+"px");
      div.style.setProperty("--w", r.width+"px");
  });
});

.div {
  margin: 5px;
  flex: 0 0 100px;
  text-align:center;
  border:1px solid;
}

img {
  width: 70%;
}

p {
  margin: 0;
  position: fixed;
  top: var(--t,0);
  left:var(--l,0);
  width:var(--w,0);
  display:none;
}

#container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.div:hover p {
  display:block;
}

<div id="container">

  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>
  <div class="div">
    <img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_1280.png" />
    <p>Some very long text Some very long text Some very long text Some very long text Some very long text
    </p>
  </div>

</div>

将 overflow-y 设置为可见，而 overflow-x 为自动，以便内容可以垂直溢出父容器

Set overflow-y visible while overflow-x is auto so that content can vertically overflow parent's container

html

javascript

css

overflow

3. Scrolling and Clipping Overflow: the overflow-x, overflow-y, and overflow properties^ref

将 overflow-y 设置为可见，而 overflow-x 为自动，以便内容可以垂直溢出父容器

Set overflow-y visible while overflow-x is auto so that content can vertically overflow parent's container

html

javascript

css

overflow

3. Scrolling and Clipping Overflow: the overflow-x, overflow-y, and overflow propertiesref

3. Scrolling and Clipping Overflow: the overflow-x, overflow-y, and overflow properties^ref