How to set Flex Box to fill up free space?

Design help General
1

Hi,

I’m looking for some help,

I’m creating a food menu which will be displayed on a TV screen, I’ve created how I want things to look and I’ve added a slider, however I’m having issues with making the slider stay inside of the white container.

I want the screen to be full height of the TV, but want the slider to remain inside of the white container.

Any one able to help before I pull out my remaining hair :slight_smile: Im not great with Flex but the videos on webflow seem to not be working.
Thanks

Read only link - https://preview.webflow.com/preview/mattsscreen-4e64d9b1d8e36-daee3b901038e?utm_medium=preview_link&utm_source=designer&utm_content=mattsscreen-4e64d9b1d8e36-daee3b901038e&preview=f5d52efc6b9c4c9f688f344607eec507&workflow=preview

2

hi @Matty these are FlexBox basics. I have made a short video to show you how to set up basic behaviour for your element.

https://cln.sh/lLelQf

3

@Stan Thanks Stan, really appreciating you taking the time to make that.

I’ve followed your guide but for some reason the slider is overlapping my purple box, have I missed something?

Cheers

4

hi @Matty what purple element? You mean the footer?

5

@Stan Yes sorry the footer

Capture
Capture1600×123 455 Bytes

6

hi @Matty Sorry I have forget to mentioned that you had set footer to absolute position. Just change it to position relative and all will start work as expected.

CleanShot 2021-10-25 at 19.12.15
CleanShot 2021-10-25 at 19.12.152046×1251 392 KB

7

Hi @Matty do you have further question related to this topic? If not and you have successfully achieved desired design based on recommended setting feel free to close your issue as solved.

Have a great day/night. :wink: