Получение полос прокрутки для работы с гибким элементом

Question

У меня есть родитель div с фиксированной или рассчитанной высотой и шириной.В стороне фиксированная ширина и содержание очень большое.Исходный код приведен ниже.

• Родитель (синий) может находиться в другом контейнере, поэтому его размер неопределен.
• Отклонение (зеленое) имеет фиксированную ширину.
• Контейнер для контента (фиолетовый) имеет растущую ширину, которая заполнит остальную часть ширины, в то время как фактическое содержимое очень мало.
• Большое содержимое (оранжевое) имеет очень большое содержимое.

Мое желание - когда содержимое становится большим, полоса прокрутки должна появиться в контейнере содержимого (фиолетового цвета).Но когда я установил overflow: auto; для родительского элемента и контейнера, вертикальная полоса прокрутки появилась, но горизонтальная в нижней части родительского контейнера.

Единственное решение - установить фиксированную ширину фиолетового контейнера, например width: calc(100vw - 100px).Но я очень смущен, почему фиолетовая ширина больше, чем blue - green, даже если я установил свойство переполнения.

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

.p {
  display: flex;
  background: blue;
  padding: 10px;
  overflow: auto;
  width: 400px;
  height: 300px;
}

.aside {
  background: green;
  flex: 0 0 100px;
  margin-right: 10px;
}

.content {
  /* width: calc(400px - 130px); */
  padding: 10px;
  background: purple;
  flex: 1 0 auto;
  overflow: auto;
  overflow-x: auto;
  overflow-y: auto;
}

.large {
  background: orange;
  width: 1000px;
  height: 800px;
}

<div class="p">
  <div class="aside">
    aside (fix width)
  </div>
  <div class="content">
    <div class="large">
      large content (need scrollbar)
    </div>
  </div>
</div>

Answer 1

Это ваш код:

.content {
  /* width: calc(400px - 130px); */
  padding: 10px;
  background: purple;
  flex: 1 0 auto;
  overflow: auto;
  overflow-x: auto;
  overflow-y: auto;
}

У вас flex-basis установлено значение auto.Я думаю, что именно это убивает эффект overflow.

Свойство overflow не будет работать без фиксированной длины .Вот почему это работает, когда вы включаете width: calc(400px - 130px).Но это также может работать, если у предка есть фиксированная длина.

Попробуйте использовать только это:

.content {
  padding: 10px;
  background: purple;
  overflow: auto;
}

исправленный кодовый элемент

.p {
  display: flex;
  background: blue;
  padding: 10px;
  overflow: auto;
  width: 400px;
  height: 300px;
}

.aside {
  background: green;
  flex: 0 0 100px;
  margin-right: 10px;
}

.content {
  /* width: calc(400px - 130px); */
  padding: 10px;
  background: purple;
  /* flex: 1 0 auto; */
  overflow: auto;
  /* overflow-x: auto; */
  /* overflow-y: auto; */
}

.large {
  background: orange;
  width: 1000px;
  height: 800px;
}

<div class="p">
  <div class="aside">
    aside (fix width)
  </div>
  <div class="content"> 
    <div class="large">
      large content (need scrollbar)
    </div>
  </div>
</div>
  

Answer 2

Родитель, который .p должен иметь overflow: hidden;, .content должен иметь overflow: auto;, чтобы иметь возможность прокручивать внутри требуемого элемента, и здесь часть, с которой вы можете играть.

по горизонтали .large {width: 2000px; height: 100%;} вам нужно дать фиксированную ширину

по вертикали .large {height: 2000px; width: 100%;} вы должны дать фиксированная высота

Первый заход с горизонтальная прокрутка

.p {
  display: flex;
  background: blue;
  padding: 10px;
  overflow: hidden;
  width: 400px;
  height: 300px;
}

.aside {
  background: green;
  flex: 0 0 100px;
  margin-right: 10px;
}

.content {
  padding: 10px;
  flex-grow: 1;
  background: purple;
  overflow: auto;
}

.large {
  background: orange;
  height: 100%;
  width: 2000px;
}

<div class="p">
  <div class="aside">
    aside (fix width)
  </div>
  <div class="content"> 
    <div class="large">
      large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
       large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
       large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
      
    </div>
  </div>
</div>
  

Второй подход с вертикальной прокруткой

.p {
  display: flex;
  background: blue;
  padding: 10px;
  overflow: hidden;
  width: 400px;
  height: 300px;
}

.aside {
  background: green;
  flex: 0 0 100px;
  margin-right: 10px;
}

.content {
  padding: 10px;
  flex-grow: 1;
  background: purple;
  overflow: auto;
}

.large {
  background: orange;
  height: auto;
  width: 100%;
}

<div class="p">
  <div class="aside">
    aside (fix width)
  </div>
  <div class="content"> 
    <div class="large">
      large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
       large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
       large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
            large content (need scrollbar)
      
    </div>
  </div>
</div>