Полоса прокрутки и ее содержимое скрыты за пределами div

Question

Так что у меня есть проблема, когда у меня есть 2 div внутри другого div с фиксированным размером.Я второй из двух слишком велик, чтобы поместиться в div с фиксированной высотой, поэтому я хочу, чтобы появилась прокрутка.Но полоса прокрутки выходит за пределы содержимого.Как это исправить?

html:

<div class="main"> 
  <div class="first-child">
    <div class="small-content">
      Content
    </div>
  </div>
  <div class="second-child">
    <div class="large-content">
      Content
    </div>
  </div>
</div>

css:

.main {
  height: 250px;
  overflow: hidden;
}

.first-child {
  background-color: red;
}

.second-child {
  max-height: 100%;
  background-color: blue;
  overflow-y: scroll;
}

.large-content {
  padding-top: 300px;
}

.small-content {
  padding: 10px;

}

https://codepen.io/RilleJ/pen/JeBVpz

Я также добавил пример, чтобы показать, что я имею в виду.По сути, я хочу иметь возможность прокручиваться до конца в синем поле и видеть содержимое без установки фиксированной высоты.(Не то чтобы содержимое выше, красное поле, может быть разных размеров)

Answer 1

• Используйте flexbox, чтобы разделить пространство контейнера между дочерними элементами.
• Добавьте flex-grow: 0 и flex-shrink: 0 для ребенка, которому просто нужно занять место, необходимое для его содержимого.
• Добавить flex-grow: 1 и flex-сжать: 1 на других дочерних элементах, чтобы разделить оставшееся пространство поровну (каждый дочерний элемент будет занимать по крайней мере размер его содержимого).

.main {
  height: 250px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.first-child {
  flex-grow: 0;
  flex-shrink: 0;
  background-color: red;
}

.second-child {
  flex-grow: 1;
  flex-shrink: 1;
  background-color: blue;
  overflow-y: scroll;
}

.large-content {
  padding-top: 300px;
}

.small-content {
  padding: 10px;

}

<div class="main"> 
  <div class="first-child">
    <div class="small-content">
      Content
    </div>
  </div>
  <div class="second-child">
    <div class="large-content">
      Content
    </div>
  </div>
</div>