Переполнение столбцов внутри поля не работает

Question

Я использую Chrome и не могу переполнить эти два столбца полосой прокрутки внутри поля.Вместо этого они проходят мимо поля.

Я пытался возиться с высотой, устанавливая переполнение: свойства авто / прокрутки для всех различных элементов на каждом уровне, похоже, ничего не работает.

Вот кодекс проблемы:

https://codepen.io/anon/pen/vqxOBV

.sidebar-list {
  overflow-y: auto;
}

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

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

Answer 1

Сделать положение relative для parent-main и absolute для child-settings элементов. Примените overflow: auto;height:100% к элементам child для переполнения.

/*parent*/
    .main {
      position: relative;
      width: 100%;
      height: 400px
    }

/*child*/
    .settings {
      overflow: auto;
      height: 100%;
      width: 100%
    }

.main {
  position: relative;
  width: 100%;
  height: 400px
}

.settings {
  overflow: auto;
  height: 100%;
  width: 100%
}

<div class="main">
  <div class="container settings" style="position: absolute;">
    <div class="box no-box-small-mobile">
      <div class="column">
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
      </div>
    </div>
  </div>
</div>
<div class="main">
  <div class="container settings" style="position: absolute;">
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
  </div>

</div>

Answer 2

на самом деле .sidebar-list не получается рассчитанное значение высоты.

, поэтому вы можете сделать 2 вещи

1. добавить overflow-y: auto; с .box <div class="box no-box-small-mobile" style="max-height: 400px; overflow-y: auto;">
2. добавить max-height: 400px; в .sidebar-list

.sidebar-list {
  overflow-y: auto;
  max-height: 400px;
} 

Answer 3

Добавить overflow-y: scroll; к .box вместо .sidebar-list

Смотрите это скрипка