Flexbox Help on a test layout

Hi folks,

I am coding out a test layout but I am stuck. I have a thumbnail and then content wrapped in their own divs but the div for thumbnails is massive. I have tried shrink and grow in flexbox but I am lost:


That is my fiddle - can someone point me in the right direction?


How do you want it to be laid out?

So that you have the :slight_smile:

1st article with the image left and content right

2, article content left and image on the right

This is done but the image doesn’t need to take up all the space :slight_smile:

So how exactly do you want the other content, besides the image, to be arranged?

Edit: Basically, right now your .post-body container has two child elements: .the-thumnail and .post-content. Because .post-body is a flex container, it is dividing the container for those children. So the thumbnail isn’t big, it’s just being allocated the same height as the tallest sibling element, `.post-content’. There are various ways to fix this, but it depends on how you want the content to be displayed.

1 Like

Thanks for your awesome help. I have just figured it out with reading this doc:


Which I have read before just needed a lightnbulb to click :flashlight:

Here is a short video of what I was trying to achieve:


Thank you again for your help, it is what makes FreeCodeCamp the awesome place it is :wink:

Also updated this too:


For you to look at :slight_smile: