Сделать прокрутку div для обеих осей - PullRequest
1 голос
/ 17 января 2020

У меня есть контейнер с фиксированной высотой и с содержимым внутри, которое расширяется. Как сделать контейнер прокручиваемым для обеих осей? Я могу установить overflow-x / y скрытым для контейнера, но он работает только для одной оси. Вот код.

.timetable-container {
  position: absolute;
  margin-top: 30px;
  width: 1000px;
  height: calc(100vh - 120px - 30px);
  background: red;
  overflow-y: hidden;
}
.timetable-container .timetable-inner-container {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
}
.timetable-container .timetable-inner-container .timetable-day {
  width: 350px;
  height: 1200px;
  background: green;
}
<div class="timetable-container">
  <div class="timetable-inner-container">
      <div class="timetable-day">
        <h1 class="day">tuesday</h1>
        <div class="timetable-lesson"></div>
        <div class="timetable-lesson"></div>
        <div class="timetable-lesson"></div>
        <div class="timetable-lesson"></div>
      </div>
      <div class="timetable-day">
        <h1 class="day">wednesday</h1>
        <div class="timetable-lesson"></div>
        <div class="timetable-lesson"></div>
        <div class="timetable-lesson"></div>
      </div>
      <div class="timetable-day">
        <h1 class="day">thursday</h1>
        <div class="timetable-lesson"></div>
        <div class="timetable-lesson"></div>
        <div class="timetable-lesson"></div>
      </div>
      <div class="timetable-day">
        <h1 class="day">wednesday</h1>
        <div class="timetable-lesson"></div>
        <div class="timetable-lesson"></div>
        <div class="timetable-lesson"></div>
      </div>
      <div class="timetable-day">
        <h1 class="day">thursday</h1>
        <div class="timetable-lesson"></div>
        <div class="timetable-lesson"></div>
        <div class="timetable-lesson"></div>
      </div>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 17 января 2020

Если вы измените свой код, как мой пример, он будет работать для обеих осей.

.timetable-container {
  position: absolute;
  margin-top: 30px;
  width: 1000px;
  height: calc(100vh - 120px - 30px);
  background: red;
  overflow: auto;
}
0 голосов
/ 17 января 2020

Если вы установите переполнение для прокрутки, оно будет работать для обеих осей.

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