Как сделать так, чтобы этот гибкий внук показывал полосу прокрутки?

Question

У меня есть проблема CSS, и я не могу понять, как ее решить. Я бы хотел, чтобы в разделе .panel-extra-content была полоса прокрутки, но, похоже, она по какой-то причине не работает. У кого-нибудь есть идеи, что я здесь делаю не так? Спасибо

.panel {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  width: 150px;
  height: 60px;
}

.panel-content {
  flex: 1 1 auto;
}

.panel-extra-content {
  overflow-y: scroll;
}

.child {
  height: 40px;
  border: 1px solid red;
}

button {
  height: 40px;
  width: 100px;
}

<div class="panel">
  <div class="panel-content">
    <div class="info" tabindex="0"><span>Number</span></div>
    <div class="panel-extra-content">
      <div class="child">Child</div>
      <div class="child">Child</div>
      <div class="child">Child</div>
      <div class="child">Child</div>
      <div class="child">Child</div>
      <div class="child">Child</div>
      <div class="child">Child</div>
      <div class="child">Child</div>
      <div class="child">Child</div>
    </div>
  </div>
  <div class="panel-footer">
    <button>hey</button>
  </div>
</div>

Answer 1

для того, чтобы его можно было прокручивать, вам нужно добавить высоту в класс .panel-extra-content, например:

.panel {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  width: 150px;
  height: 60px;
}

.panel-content {
  flex: 1 1 auto;
}

.panel-extra-content {
  overflow-y: scroll;
  height: 100px;
}

.child {
  height: 40px;
  border: 1px solid red;
}

button {
  height: 40px;
  width: 100px;
}

<div class="panel">
  <div class="panel-content">
    <div class="info" tabindex="0"><span>Number</span></div>
    <div class="panel-extra-content">
      <div class="child">Child</div>
      <div class="child">Child</div>
      <div class="child">Child</div>
      <div class="child">Child</div>
      <div class="child">Child</div>
      <div class="child">Child</div>
      <div class="child">Child</div>
      <div class="child">Child</div>
      <div class="child">Child</div>
    </div>
  </div>
  <div class="panel-footer">
    <button>hey</button>
  </div>
</div>