Вложенный, центрированный, столбец сетки CSS появляется за пределами экрана по отрицательной оси X, даже с «overflow-x: scroll»

Question

Здесь необходимо отобразить серию вложенных центрированных элементов CSS-сетки.Мы рендерим что-то вроде иерархического дерева с верхним узлом сверху, затем узлами второго уровня, узлами третьего уровня и т. Д.

Проблема в том, что более поздние уровни выходят из div отрицательно иположительные направления оси X.

Настройка overflow-x: scroll решает проблему только для положительного направления оси X.То есть вы можете прокрутить вправо, но не влево.

Приведенный ниже пример является сильно упрощенным примером реальной проблемы, которую я пытаюсь решить.Красный элемент на 3-м уровне находится вне страницы по отрицательной оси X.Вы можете прокрутить вправо, но не влево.

Что можно сделать, чтобы все дерево и все узлы быливозможность прокрутки до?

Код следует ( Ссылка на JS Fiddle. ):

#tree {
  overflow-x: scroll;
}

.flex-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid {
  display: grid;
}

.content {
  width: 300px;
  border-radius: 5px;
  background-color: blue;
  color: white
}

<div id="tree" class="flex-col">
  <div class="content">Content</div>
  <div class="grid">
    <div class="flex-col" style="grid-column: 1">
      <div class="content">Content</div>
      <div class="grid">
        <div class="flex-col" style="grid-column: 1;">
          <div class="content" style="background-color: red;">** This is off the screen **</div>
        </div>
        <div class="flex-col" style="grid-column: 2">
          <div class="content">Content</div>
        </div>
      </div>
    </div>
    <div class="flex-col" style="grid-column: 2">
      <div class="content">Content</div>
      <div class="grid">
        <div class="flex-col" style="grid-column: 1">
          <div class="content">Content</div>
        </div>
        <div class="flex-col" style="grid-column: 2">
          <div class="content">Content</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Вы можете создать дополнительную обертку внутри элемента tree, которая будет встроенным контейнером flexbox , чтобы он занимал столько же места, сколько его содержимое.Используйте text-align: center, чтобы центрировать tree, когда нет прокрутки - см. Демонстрацию ниже:

#tree {
  overflow-x: auto; /* overflow horizontally here */
  text-align: center; /* align horizontally */
}

#tree > .flex-col {
  display: inline-flex; /* inline flex container */
  text-align: initial; /* reset text align to default left */
}

.flex-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid {
  display: grid;
}

.content {
  width: 300px;
  border-radius: 5px;
  background-color: blue;
  color: white
}

<div id="tree">
  <div class="flex-col"> <!-- <-- extra wrapper -->
    <div class="content">Content</div>
    <div class="grid">
      <div class="flex-col" style="grid-column: 1">
        <div class="content">Content</div>
        <div class="grid">
          <div class="flex-col" style="grid-column: 1;">
            <div class="content" style="background-color: red;">** This is off the screen **</div>
          </div>
          <div class="flex-col" style="grid-column: 2">
            <div class="content">Content</div>
          </div>
        </div>
      </div>
      <div class="flex-col" style="grid-column: 2">
        <div class="content">Content</div>
        <div class="grid">
          <div class="flex-col" style="grid-column: 1">
            <div class="content">Content</div>
          </div>
          <div class="flex-col" style="grid-column: 2">
            <div class="content">Content</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Необходимо убедиться, что элементы сетки не расширяются шире, чем их контейнер.

Чтобы решить эту проблему, вы можете установить max-width: 100% на .grid:

#tree {
  overflow-x: scroll;
}

.flex-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid {
  display: grid;
  max-width: 100%;
}

.content {
  width: 300px;
  border-radius: 5px;
  background-color: blue;
  color: white
}

<div id="tree" class="flex-col">
  <div class="content">Content</div>
  <div class="grid">
    <div class="flex-col" style="grid-column: 1">
      <div class="content">Content</div>
      <div class="grid">
        <div class="flex-col" style="grid-column: 1;">
          <div class="content" style="background-color: red;">** This is off the screen **</div>
        </div>
        <div class="flex-col" style="grid-column: 2">
          <div class="content">Content</div>
        </div>
      </div>
    </div>
    <div class="flex-col" style="grid-column: 2">
      <div class="content">Content</div>
      <div class="grid">
        <div class="flex-col" style="grid-column: 1">
          <div class="content">Content</div>
        </div>
        <div class="flex-col" style="grid-column: 2">
          <div class="content">Content</div>
        </div>
      </div>
    </div>
  </div>
</div>