CSS: проблема с сеткой, полосами прокрутки и всплывающей подсказкой

Question

Я потянулся за проблему CSS, которую я постараюсь описать здесь:

В следующем примере (https://codesandbox.io/s/jjq4km89y5), вы можете видеть прокручиваемый контент (фиолетовый фон),и «всплывающая подсказка» (всегда показываемая в этом примере по практическим соображениям на красном фоне), которая наполовину скрыта левой панелью.

Мне нужно, чтобы содержимое фиолетового цвета можно было прокручивать, И для красноговсплывающая подсказка:

CSS использует CSS Grid, но проблема та же, если я использую flex вместо.

Кажется, проблема заключается в операторе overflow: auto (строка 59 файла styles.css в изолированной программной среде кода).

Спасибо !!

(чтобы увидеть живой пример, перейдите по ссылке https://codesandbox.io/s/jjq4km89y5)

Код, в противном случае, можно увидеть здесь:

<div class="page">
  <div class="menu">Menu</div>
  <div class="content">
    <div class="grid">
      <div class="nav">Top Nav</div>
      <div class="panel">Left Panel</div>
      <div class="analysis">
        <div>
          <p>Some random content</p>
          <div class="tooltip-trigger">
            A div with a Tooltip (always showing here)
            <div class="tooltip">
              You should be able to see the entirety of this text here,
              going over the Left Nav
            </div>
          </div>
          <div class="long-content">
            Some very long content that should make the purple div scroll
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

И CSS:

.page {
  display: flex;
  margin: 0;
  height: 100%;
  width: 100%;
  position: fixed;
}

.menu {
  width: 40px;
  background-color: orange;
  height: 100%;
}

.content {
  flex: 1;
}

.grid {
  display: grid;
  grid-template-columns: 210px auto;
  grid-template-rows: 60px auto;
  grid-template-areas:
    "nav nav"
    "panel analysis";
  height: 100%;
}

.nav {
  grid-area: nav;
  padding: 10px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: grey;
  border-bottom: 3px solid black;
}

.panel {
  grid-area: panel;
  border-right: solid 3px black;
  background-color: grey;
}

.panel > div {
  height: calc(100vh - 60px);
}

.analysis {
  grid-area: analysis;
  padding: 60px;
  height: calc(100vh - 60px);
  background-color: purple;

  /* The problem is here: 
    if set to "auto", then we have a scrollbar but the red tooltip is not visible
    If set to "visible", we get the red tooltip but the scroll is gone
  */
  overflow: auto;
}

.tooltip-trigger {
  position: relative;
  background-color: green;
  border: 5px dashed rebeccapurple;
}

.tooltip {
  position: absolute;
  border: 5px dashed orange;
  background-color: red;
  height: 200px;
  width: 200px;
  top: 10px;
  left: -200px;
}

.long-content {
  height: 3000px;
  background-color: pink;
  border: 5px dashed darkred;
}

Вы также можете увидеть приложение реального мира ичто он делает:

Подсказка, как вы видите, будет отображаться для всех этих ячеек в таблице, aОн должен быть точно привязан к этой ячейке.

Содержимое таблицы также должно быть прокручиваемым.

Answer 1

Это может быть чем-то вроде взлома, но я думаю, что его можно заставить работать без слишком плохих побочных эффектов: вместо того, чтобы расположить left panel и analysis как родственные DOM-узлы, вы можете слой analysis внутри и более left panel. С некоторыми изменениями для настройки размещения контента вы можете сделать так, чтобы они выглядели рядом. Вместо прокрутки analysis со статическим left panel вы можете прокрутить left panel и сделать содержимое left panel абсолютно позиционированным.

Я сделал быструю и грязную реализацию, чтобы продемонстрировать механику:

Пересмотренный пример кода

Markup:

<div className="panel">
  <div className="panelContent">Left Panel</div>
  <div className="panelSpacer" />
  <div className="analysis">
    <div>
      <p>Some random content</p>
      <div className="tooltip-trigger">
        A div with a Tooltip (always showing here)
        <div className="tooltip">
          You should be able to see the entirety of this text here,
          going over the Left Nav
        </div>
      </div>
      <div className="long-content">
        Some very long content that should make the purple div scroll
      </div>
    </div>
  </div>
</div>

CSS:

.panel {
  grid-area: panel;
  border-right: solid 3px black;
  background-color: gray;
  display: flex;
  justify-content: space-between;
  overflow: auto;
}

.panelSpacer {
  width: 210px;
  position: relative;
  top: 0;
}

.panelContent {
  width: 210px;
  position: absolute;
  top: 60px;
}

.panel > div {
  height: calc(100vh - 60px);
}

.analysis {
  position: relative;
  width: calc(100% - 210px);
  padding: 60px;
  height: 100%;
  background-color: purple;

  /* The problem is here: 
    if set to "auto", then we have a scrollbar but the red tooltip is not visible
    If set to "visible", we get the red tooltip but the scroll is gone
  */
}

Answer 2

Это может быть решение или просто толчок в правильном направлении.

Вместо того, чтобы подсказка была абсолютно позиционирована относительно родительского элемента, сделайте ее относительно более отдаленного предка, так что это незатронуто переполнением фиолетового div.

Итак, вместо этого:

.grid {
  display: grid;
  grid-template-columns: 210px auto;
  grid-template-rows: 60px auto;
  grid-template-areas:
    "nav nav"
    "panel analysis";
  height: 100%;
}

.tooltip-trigger {
  position: relative;
  background-color: green;
  border: 5px dashed rebeccapurple;
}

.tooltip {
  position: absolute;
  border: 5px dashed orange;
  background-color: red;
  height: 200px;
  width: 200px;
  top: 10px;
  left: -200px;
}

Попробуйте что-то вроде этого:

.grid {
  position: relative; /* new */
  display: grid;
  grid-template-columns: 210px auto;
  grid-template-rows: 60px auto;
  grid-template-areas:
    "nav nav"
    "panel analysis";
  height: 100%;
  position: relative;
}

.tooltip-trigger {
  /* position: relative; */
  background-color: green;
  border: 5px dashed rebeccapurple;
}

.tooltip {
  position: absolute;
  border: 5px dashed orange;
  background-color: red;
  height: 200px;
  width: 200px;
  top: 200px;   /* adjusted */
  left: 60px;   /* adjusted */
}

исправленная демонстрация