Overflow scroll and flex together

Hello, I am trying to apply an overflow scroll on an element that is being positioned with flex, but I noticed that it is not working because it is expanding to behave all its elements (probably because no height was defined). How would I make the scroll function properly without touching the flexbox?

<div style="width: 100%; height: 100%; display: flex;">
  <div style="flex-grow: 100; border-radius: 8px; border: solid 1px #E4E4E4; background-color: #F7F7F7; margin: 1em; overflow: hidden; display: flex;">
    <!-- Este elemeto esta expandindo -->
    <tab-panel style="max-width: 15em; flex-grow: 100; background-color: #F7F7F7; cursor: pointer; overflow: scroll;">
      Elementos...
    </tab-panel>
  </div>
</div>

Well, I do not know what "height" I should set, since flexbox is doing it for me. How to proceed?