I'm a bit new to using flexbox and I've ran into one problem I can't seem to fix.

What I want:

I want to have a container taking the available height, but whenever the content inside it takes up more space than the containers height, apply overflow:scroll

Context:

Ref image: container image

As you see on the image, everything inside of the red brackets are covered inside of a div with flex-grow:1, I want this because the images might be different sizes so therefore I need the div to take the reamining space.

As for the white container, that is also using flex-grow:1 so that the button can be on the bottom of the div.

Now, what I would like is for the content inside of the blue brackets to be taking the available height, but if there is more content than the available height, then I want it to be scrollable.

The thing that happens now if I add a lot more content to the container inside of the blue brackets, it pushes everything below it further down, meaning the overflow isn't working.

E.g Like so

As you see in the image, everything is just pushed further down and the div is being stretched.

Here is the code I have so far:

<div >
                <!-- img -->
                <div>
                    <img [src]="currentUser.photoURL" >
                </div>
                <!-- information -->
                <div >
                    <!-- Info -->
                    <div >
                        <div >
                            <p >{{currentUser.displayName}}</p>
                            <p >{{currentUser.email}}</p>
                        </div>
                        <div >
                            <div >
                                <p>
                                    some information about {{currentUser.displayName}}
                                </p>
                                <ul>
                                    <li>
                                        Some values are
                                    </li>
                                    <li>
                                        Some experience are...
                                    </li>
                                    <li>
                                        Why im helping people...
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- Message -->
                    <div >
                        <button>Send melding</button>
                    </div>
                </div>
            </div>

I'm using tailwindCSS for this project, but will happily take suggestions in normal css as well.

CodePudding user response：

I think the simplest solution for this would be to set the div you want to be a scrollable as "display: block" (or at least some version of block) with a fixed height. Once you apply that fixed height, your overflow content ought to be scrollable.