Как сделать содержимое прокручиваемым во флекс-боксе, чтобы другой блок оставался с постоянной шириной - PullRequest
Новая
       1

Как сделать содержимое прокручиваемым во флекс-боксе, чтобы другой блок оставался с постоянной шириной

1 голос
/ 27 апреля 2019

Я пытаюсь построить сетку флексбокса, чтобы ширина левой стороны оставалась постоянной во время изменения размера области просмотра. С другой стороны, правая сторона должна сжиматься, и ее содержимое становится прокручиваемым. 

.flex-container {
  display: flex;
  justify-content: center;
}

.flex-content {
  display: flex;
  width: 800px;
  height: 400px;
  justify-content: space-between;
  align-content: stretch;
  background-color: cadetblue;
}

.left-side {
  width: 200px;
  flex: initial;
  background-color: darkcyan;
}

.right-side {
  flex: 1;
  background-color: bisque;
}

.inner-content {
  background-color: aquamarine;
}
<div class="flex-container">
  <div class="flex-content">
    <div class="left-side"></div>
    <div class="right-side">
      <div class="inner-content">
        Abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
      </div>
    </div>
  </div>
</div>

Ожидается: left-side контейнер должен оставаться шириной 200 пикселей, в то время как right-side уменьшается, когда ширина области просмотра становится меньше 800 пикселей. Поле inner-content становится прокручиваемым, когда нет места для его содержимого.

Факт: left-side уменьшается, когда ширина right-side достигает ширины inner-content.

Ответы [ 2 ]

2 голосов
/ 27 апреля 2019

Вместо установки width: 200px вы можете установить flex-grow и flex-shrink на ноль для left-content, а затем установить flex-basis на 200px

  • сокращение будет составлять flex: 0 0 200px,

  • сделайте ваш right-section a flexbox тоже (и при желании выровняйте его по поперечной оси с началом, используя align-items: flex-start),

  • добавьте min-width: 0 к right-section, чтобы он переопределял значение по умолчанию min-width: auto - теперь он сможет сжиматься за пределы его содержимого,

  • также добавьте overflow: auto к inner-content (и width: 100%, если вам нужно inner-content для заполнения горизонтального пространства).

См. Демонстрацию ниже (также удалены некоторые избыточные / нежелательные стили): 

.flex-container {
  display: flex;
  justify-content: center;
}

.flex-content {
  display: flex;
  width: 800px;
  height: 400px;
  /*justify-content: space-between;
  align-content: stretch;*/
  background-color: cadetblue;
}

.left-side {
  /* width: 200px;
  flex: initial; */
  flex: 0 0 200px;  /* added */
  background-color: darkcyan;
}

.right-side {
  flex: 1;
  background-color: bisque;
  display: flex; /* added */
  align-items: flex-start; /* added */
  min-width: 0; /* added */
}

.inner-content {
  background-color: aquamarine;
  width: 100%; /* if needed */
  overflow: auto; /* added */
}
<div class="flex-container">
  <div class="flex-content">
    <div class="left-side"></div>
    <div class="right-side">
      <div class="inner-content">
        Abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
      </div>
    </div>
  </div>
</div>
1 голос
/ 27 апреля 2019 
<!DOCTYPE html>
<html>

<head>
    <style>
        .flex-container {
            display: flex;
            justify-content: center;
            min-width: 200px; /*nhannt210695 left-side width = 200px. [left-side=200px] |<- limit */
        }

        .flex-content {
            display: flex;
            width: 800px;
            height: 400px;
            justify-content: space-between;
            align-content: stretch;
            background-color: cadetblue;
        }

        .left-side {
            width: 200px; 
            flex: initial;
            background-color: darkcyan;
        }

        .right-side {
            flex: 1;
            background-color: bisque;
            width: 0px; /* nhannt210695 string "Abcd..." on the right */
        }

        .inner-content {
            background-color: aquamarine;
            overflow: auto; /* nhannt210695 auto overflow of text*/
        }
    </style>
    <title>How to make content scrollable in flex box so that another box remains with constant width</title>
</head>

<body>

    <div class="flex-container">
        <div class="flex-content">
            <div class="left-side"></div>
            <div class="right-side">
            <!-- Tip: delete div of inner-content and change screen -->
                <div class="inner-content">
                    Abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
                </div>
            </div>
        </div>
    </div>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...