0
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, as it is expanding to accommodate all its elements (probably because it was not set height). How I would make the scroll work 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 don’t know what "height" I should define, because flexbox is doing it for me. How to proceed?
But is this tab-panel going to have a height or not? For what I tested here when the content is great he gives the scroll normally... what you wanted, how you want it to behave?
– hugocsl
Same height as the parent element. I managed to do a little gambit using height: 96vh, but I do not know how it will behave in different screen sizes
– NathanPB
Young, but he’s about as tall as his father.... I guess I’m not understanding the rss problem, I put a little bit of content in the tab-panel and it got the size of the father and with the scroll...
– hugocsl
Yes, it is already the height of the father. But when it contains many elements, instead of using the scroll it expands its size
– NathanPB