Установите overflow-y видимым, когда overflow-x установлен автоматически, чтобы содержимое могло переполнить родительский контейнер по вертикали

Question

Я использую position: absolute и position: relative для отображения текста поверх изображения, если его родитель находится над ним. Контейнер, в котором находится родительский div текста и изображений, установлен на overflow-x: auto, в результате чего у него горизонтальная полоса прокрутки.

Я хочу, чтобы текст, который отображается по вертикали, переполнял элемент #container (и горизонтальная полоса прокрутки), но этого не происходит - вместо этого в контейнере появляется вертикальная полоса прокрутки.

Я не хочу, чтобы высота контейнеров увеличивалась до высоты текста.

Я пытался применить overflow-y: visible к #container, но это не решило проблему. Если я удаляю overflow-x: auto из #container, это решает проблему, но удаляет горизонтальную полосу прокрутки из #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;
}

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

Answer 1

Если свойство overflow-x или overflow-y не является ни visible, ни clip, то visible / clip рассчитывается как auto / hidden соответственно.

То есть, если вы укажете overflow-x: auto;, свойство overflow-y также будет auto (поскольку значение по умолчанию visible).

3. Переполнение и отсечение Переполнение: свойства overflow-x, overflow-y и overflow ^ref

, как указано, за исключением вычисления видимого / клипа для автоматического / скрытого ( соответственно), если один из overflow-x или overflow-y не виден и не обрезан

Одно из решений - сделать абсолютное размещение изображения вместо текста, чтобы текст определял высоту контейнер.

.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;
}

Answer 2

Рассмотрим использование 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>

Answer 3

Если вы хотите, чтобы прокрутка по оси X и ось Y были скрыты, чем вы пишете: -

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

Если вы хотите прокрутить ось Y и скрыть ось X, чем вы пишете: -

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

Если вы хотите прокрутить все оси, чем вы пишете: -

overflow:auto;

Все оси скрыты, чем: -

overflow: hidden;