CODEWITHSUNDEEP
javascripthtmlcssoverflow
The Codesee
The Codesee

Reputation: 3783

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

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/

Upvotes: 1

Views: 2869

Answers (3)

Temani Afif
Temani Afif

Reputation: 274272

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>

Upvotes: 2

sanriot
sanriot

Reputation: 804

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 propertiesref

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>

Upvotes: 2

Aware Fun
Aware Fun

Reputation: 75

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;

Upvotes: -2

Related Questions