Как добавить полосу прокрутки к элементу внутри элемента с полосой прокрутки? - PullRequest
Новая
       6

Как добавить полосу прокрутки к элементу внутри элемента с полосой прокрутки?

0 голосов
/ 30 мая 2018

У меня уже есть модал со свитком, если общий контент длиннее, чем модальная высота.Но мне нужно div внутри моего модала с собственным свитком.Моя проблема в том, что я не знаю высоту моего модала, потому что он основан на 30vh.

Если бы я мог просто установить статическую высоту для своего внутреннего div, это было бы проще, ноЯ не могу.

Моя проблема: мне нужно создать отдельный свиток для нужной области. 

.container {
  max-height: 30vh;
  border: 1px solid black;
  overflow-x: hidden;
  overflow-y: auto;
}

.header {
  border: 1px solid red;
}

.body {
  display: flex;
}

.leftArea {
  border: 1px solid green;
  width: 50%;
}

.rightArea {
  border: 1px solid blue;
  width: 50%;
  overflow-x: hidden;
  overflow-y: auto;
  /* height: ???; */
}
<div class="container">
  <div class="header">
    HEADER
  </div>
  <div class="body">
    <div class="leftArea">
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
    </div>
    <div class="rightArea">
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
    </div>
  </div>
</div>

Вот мой пример CodePen .

Ответы [ 2 ]

0 голосов
/ 31 мая 2018

В макете блока вам нужны фиксированные высоты для свойства overflow.

Из этого утверждения видно, что MDN :

Чтобы эффект overflow имел эффект, контейнер уровня блока должен иметь либо заданную высоту (height или max-height), либо white-space установить на nowrap.

Однако в flex layout это не проблема.Условие переполнения может быть вызвано для контейнера с динамической высотой.

Итак, переключите основной контейнер с display: block (по умолчанию) на display: flex .

.container {
  max-height: 30vh;
  border: 1px solid black;
  overflow-x: hidden;
  overflow-y: auto;
  /* new */ display: flex;
  /* new */ flex-direction: column;
}

.header {
  border: 1px solid red;
}

.body {
  display: flex;
  /* new */ min-height: 0; /* see note below */
}

.leftArea {
  border: 1px solid green;
  width: 50%;
}

.rightArea {
  border: 1px solid blue;
  width: 50%;
  overflow: auto;
}
<div class="container">
  <div class="header">HEADER</div>
  <div class="body">
    <div class="leftArea">
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
    </div>
    <div class="rightArea">
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
    </div>
  </div>
</div>

jsFiddle demo

Примечание. Необходимо переопределить значение по умолчанию min-height: auto, чтобы этот макет работал на большинствебраузеры.Проблема объясняется здесь: Почему гибкие элементы не уменьшаются до размера контента?

0 голосов
/ 30 мая 2018

Привет не правильно понял вопрос.

Но это то, что вы просили? 

.container {
  max-height: 70vh;
  border: 1px solid black;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.header {
  border: 1px solid red;
}

.body {
  display: flex;
  flex-size: 1;
}

.leftArea {
  border: 1px solid green;
  width: 50%;
}

.rightArea {
  border: 1px solid blue;
  width: 50%;
  overflow-x: hidden;
  overflow-y: auto;
  /* height: ???; */
}
<div class="container">
  <div class="header">
    HEADER
  </div>
  <div class="body">
    <div class="leftArea">
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
      <p>left area</p>
    </div>
    <div class="rightArea">
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
      <p>right area</p>
    </div>
  </div>
</div>
...