Вырезание элементов из полосы прокрутки

Question

Вот пример того, что происходит: https://jsfiddle.net/fz5asxn6/

Если вы несколько раз нажмете кнопку «Нажмите меня» и кнопку «Добавить», вы сможете увидеть добавленные элементы, но нижние будучи обрезанным, и я не вижу нижней части полосы прокрутки.

Я пытался установить свойства overflow, flex-flow и table.

Есть ли способ чтобы увидеть, есть ли options-body весь options внутри sidebar, ничего не отрезав?

Answer 1

Вам нужно только добавить box-sizing: border-box; к вашему .sidebar

. Это скажет браузеру рассчитать общую высоту от границы, а не от содержимого, и, таким образом, высота 100% будет включать отступы. ,

Так что ваш css для .sidebar станет:

.sidebar {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;
  box-sizing: border-box;
}

Обновлен Jsfiddle: https://jsfiddle.net/nabtron/Lznrfcyv/1/

Надеюсь, это поможет.

Answer 2

Ого, это меня смутило. Я видел вашу ошибку, и когда я открыл инструменты разработчика, она исчезла. Мне потребовалось некоторое время, чтобы понять, что ваш медиа-запрос менял вещи в зависимости от высоты. Но это сразу показало мне ошибку.

Ваша боковая панель имеет height: 100%; и margin-top: 60px;. Попробуйте установить margin-top:0;, тогда вы увидите, что это вызывает проблему.

Я предлагаю установить height: calc(100% - 60px);

И в вашем медиа-запросе height: calc(100% - 15px);

Это должно исправить вашу проблему. проблема.