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 o

Solution 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: 00100px;
  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:hoverp {
  display:block;
}

<divid="container"><divclass="div"><imgsrc="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><divclass="div"><imgsrc="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><divclass="div"><imgsrc="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><divclass="div"><imgsrc="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><divclass="div"><imgsrc="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><divclass="div"><imgsrc="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><divclass="div"><imgsrc="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><divclass="div"><imgsrc="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><divclass="div"><imgsrc="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>

Solution 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

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: 00100px;
  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;
}

<divid="container"><divclass="div"><imgsrc="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><divclass="div"><imgsrc="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><divclass="div"><imgsrc="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><divclass="div"><imgsrc="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><divclass="div"><imgsrc="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><divclass="div"><imgsrc="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><buttononclick="toggleText();">Click me
</button>

Solution 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;