CSS Grid и переполнение - PullRequest
Новая
       8

CSS Grid и переполнение

0 голосов
/ 22 ноября 2018

Представьте простейший из возможных макет CSS Grid на странице с двумя столбцами, где обе страницы занимают ровно 50% ширины просмотра.У меня есть элементы, изложенные таким образом, но у меня также есть несколько всплывающих подсказок, которые расположены абсолютно на элементах на моей странице.Эти всплывающие подсказки переполняют содержимое и заставляют сетку CSS иметь горизонтальную полосу прокрутки вплоть до полной ширины подсказок.

Свойство overflow-x каждой панели, по-видимому, по умолчанию прокручивается, как я уже говорил.Можно также установить его как «скрытый», который усекает всплывающие подсказки при их переходе на другую панель.

Однако установить переполнение: видимый не представляется возможным.Возможно ли иметь макет столбца сетки CSS, но также поддерживать положение: абсолютные элементы, которые могут «перебегать» на другую сторону сетки?

РЕДАКТИРОВАТЬ: https://codepen.io/AngryPidgeon/pen/eQVMgL Я понял, что настройка«overflow-y: scroll» является частью проблемы.Если этот параметр не установлен, подсказка отображается на правой панели, как и ожидалось.Когда установлен параметр overflow-y: scroll, левая панель также прокручивается по горизонтали и не позволяет всплывающей подсказке отображаться на правой панели независимо от того, что. 

.grid {
  display: grid;
  grid-template-areas: 'left right';
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
}

.left {
  background-color: beige;
  grid-area: left;
  overflow-y: scroll;
}
.right {
  background-color: khaki;
  grid-area: right;
}

.tooltip-wrapper {
  position: relative;
}

.tooltip {
  background-color: white;
  position: absolute;
  top: 105%;
  left: 105%;
}
<div class='grid'>
  <div class='left'>
    <div class='tooltip-wrapper'>
      <p>Content and text and stufdf</p>
      <p class='tooltip'>Tooltip text</p>
    </div>
    <p>left content</p>
    <p>Lorem ipsum</p>
    <p>Lorem</p>
    <p>left content</p>
    <p>Lorem ipsum</p>
    <p>Lorem</p>
    <p>left content</p>
    <p>Lorem ipsum</p>
    <p>Lorem</p>
    <p>left content</p>
    <p>Lorem ipsum</p>
    <p>Lorem</p>
  </div>
  <div class='right'>
    <p>More Content</p>
  </div>
</div>
...