Как прокрутить вложенный дочерний элемент flexbox, когда контейнер flexbox имеет указанную высоту - PullRequest
Новая
       5

Как прокрутить вложенный дочерний элемент flexbox, когда контейнер flexbox имеет указанную высоту

0 голосов
/ 02 апреля 2019

Я пытаюсь сделать вложенный flexbox дочерним div (child211) для отображения прокрутки, когда свободного места нет.Контейнер Flexbox имеет заданную высоту.У родительского элемента flexbox child2 объекта child211 переполнение: скрыто.Я не хочу прокручивать весь child2.

Кстати: я показываю только базовую структуру, поскольку в моем реальном сценарии путь к последнему div очень длинный.

Пример CSS и HTML выглядит следующим образом: 

.container {
  display: flex;
  flex-direction: column;
  background-color: yellow;
  height: 380px;
}

.child {
  font-size: 100px;
  color: white;
}

.child1 {
  font-size: 50px;
  background: red;
}

.child2 {
  height: 100%;
  background-color: green;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.child21 {
  background-color: rgb(20, 255, 0);
}

.child211 {
  background-color: rgb(200, 255, 0);
  overflow: auto;
}

.child3 {
  font-size: 50px;
  background-color: blue;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="child1 child">
      DIV1
    </div>
    <div class="child2 child">
      DIV2
      <div class="child21 child">
        DIV21
        <div class="child211 child">
          DIV211
        </div>
      </div>
    </div>
    <div class="child3 child">
      DIV3
    </div>
  </div>
</body>

</html>

1 Ответ

0 голосов
/ 02 апреля 2019

Сделайте child2 гибким контейнером с направлением столбца и просто добавьте overflow:auto к вложенным дочерним элементам: 

.container {
  display: flex;
  flex-direction: column;
  background-color: yellow;
  height: 380px;
}

.child {
  font-size: 100px;
  color: white;
}

.child1 {
  font-size: 50px;
  background: red;
}

.child2 {
  height: 100%;
  background-color: green;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display:flex;
  flex-direction:column;
}

.child21 {
  background-color: rgb(20, 255, 0);
  overflow:auto;
}

.child211 {
  background-color: rgb(200, 255, 0);
  overflow: auto;
}

.child3 {
  font-size: 50px;
  background-color: blue;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="child1 child">
      DIV1
    </div>
    <div class="child2 child">
      DIV2
      <div class="child21 child">
        DIV21
        <div class="child211 child">
          DIV211
        </div>
      </div>
    </div>
    <div class="child3 child">
      DIV3
    </div>
  </div>
</body>

</html>

Вы можете продолжать вложение гибкого контейнера, если хотите прокрутить на внутреннем уровне. 

.container {
  display: flex;
  flex-direction: column;
  background-color: yellow;
  height: 380px;
}

.child {
  font-size: 100px;
  color: white;
}

.child1 {
  font-size: 50px;
  background: red;
}

.child2 {
  height: 100%;
  background-color: green;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display:flex;
  flex-direction:column;
}

.child21 {
  background-color: rgb(20, 255, 0);
  overflow:auto;
  display:flex;
  flex-direction:column;
}

.child211 {
  background-color: rgb(200, 255, 0);
  overflow: auto;
}

.child3 {
  font-size: 50px;
  background-color: blue;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <div class="child1 child">
      DIV1
    </div>
    <div class="child2 child">
      DIV2
      <div class="child21 child">
        DIV21
        <div class="child211 child">
          DIV211
        </div>
      </div>
    </div>
    <div class="child3 child">
      DIV3
    </div>
  </div>
</body>

</html>
...