Как использовать 'overflow: scroll' с контейнером div динамического размера? - PullRequest
Новая
       12

Как использовать 'overflow: scroll' с контейнером div динамического размера?

0 голосов
/ 27 февраля 2019

Я хотел бы поместить большой контент <div> в прокручиваемый контейнер <div style='overflow: scroll'>.Контейнер должен оставаться шириной его родителя (занимать левую панель в приведенном ниже примере) и показывать полосу прокрутки, если его содержимое слишком велико.

Я не могу установить width / max-width для контейнера <div>, потому что ему нужно изменить размер по мере изменения размера его родительского элемента (например, когда пользователь изменяет размер окна).Но теперь контейнер <div> просто растет, чтобы вместить весь его контент, и толкает страницу шире, чем окно, поэтому отображается полоса прокрутки для всей страницы, а это не то, что мне нужно.

Я хочу, чтобы страница оставалась шириной окна, без полосы прокрутки для страницы.Контейнер <div> остается шириной своего родителя (левая панель) и показывает полосу прокрутки для его содержимого.Как этого добиться?

Пример:

    <html>
    <body style="display: flex">
      <!-- left panel -->
      <div style="flex: 2">
        <!-- scrollable container, no effect -->
  	<div style="overflow: scroll">
          <!-- big child content div -->
      	  <div style="width: 800px; height: 200px; background: red" />
        </div>
      </div>

      <!-- vertical divider -->
      <div style="width: 1px; background: blue" />

      <!-- right panel -->
      <div style="flex: 3">
        right panel content
      </div>
    </body>
    </html>

Ответы [ 2 ]

0 голосов
/ 27 февраля 2019

Если вы не можете установить width/max-width для контейнера, я предполагаю, что вы все равно можете установить max-width в parent (левая панель) container.Если да, вы можете попробовать установить max-height:inherit на container после установки max-width на левой панели. 

    <html>
    <body style="display: flex">


  <!-- left panel -->
  <div style="flex: 2; max-height:100px">
    <!-- scrollable container, no effect -->
  	<div style="overflow: scroll;max-height:inherit;">
            <!-- big child content div -->
            <div style="width: 800px; height: 200px; background: red"></div>
        </div>
  </div>

  <!-- vertical divider -->
  <div style="width: 1px; background: blue">

  <!-- right panel -->
  <div style="flex: 3">
    right panel content
  </div>


<script type="text/javascript">
    
</script>

</div><div class="as-console-wrapper"><div class="as-console"></div></div></body>
    </html>
0 голосов
/ 27 февраля 2019

Для прокручиваемого контейнера и родительского контейнера (левой панели) добавьте height: 100%, width: 100%;.Он будет динамически изменяться в зависимости от родителя, если задан в%, и свойство переполнения также будет работать.

...