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

Question

I'm using position: absolute and position: relative to display text over an image if its parent is hovered over. The container that the text and images parent div is in is set to overflow-x: auto , causing it to have a horizontal scrollbar.

I want the text that appears to vertically overflow the #container element (and the horizontal scrollbar), but this is not happening - instead, a vertical scrollbar is appearing in the container.

I do not want the containers height to expand to the height of the text.

I've tried applying overflow-y: visible to #container but this hasn't resolved the problem. If I remove overflow-x: auto from #container it fixes the problem, but removes the horizontal scrollbar from #container and puts it on body (which I don't want)

 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

Consider the use of position:fixed and adjust the position dynamically on hover:

 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>

Answer 2

If either overflow-x or overflow-y property is neither visible nor clip , then visible / clip is calculated as auto / hidden , respectively.

That is, if you specify overflow-x: auto; , overflow-y property will also be auto (because the default value is 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

One solution is to make the absolute placement of the image instead of the text, so that the text determines the height of the container.

 .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

If you want X-Axis scrolling and Y-Axis hidden than you write :-

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

If you want Y-Axis scrolling and X-Axis hidden than you write:-

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

If you want all Axis scrollable than you write:-

overflow:auto;

All Axis hidden than: -

overflow: hidden;