CODEWITHSUNDEEP
htmlcssimageflexbox
Hans
Hans

Reputation: 51

Unable to fix width of flexbox boxes

I'm trying to utilize flexbox - three boxes in a row - but what happens is:

Content in box3 to the right (text) pushes content in box1 to the left (an image), so that the image is squeezed and narrowed.

This problem can be seen just below the slider at the top of my homepage: http://localnepaltoday.com I have five images to the left with text to the right.

What apparently happens is:

If the text in box3 to the right is identical for all the images, the width of the images is too. But if not, the width will vary as text is squeezing the images.

To illustrate:

In image five from the bottom, just a few j-letters at the end of "since" means that the first sentence gets longer, and so the image is squeezed.

What can I do to fixate or freeze the width of box3 so it does not squeeze the image in box1 and make the image narrower?

Or in other words, how can I make the images to the left line up ? (they are otherwise uploaded with exactly the same dimensions).

Thanks a lot for any help with this.

Here's the html:

    http://codepen.io/localnepal/pen/ZBLLjV

The CSS: 

    twocolumns{display: flex; display:-webkit-flex;}
    .box .entry img {max-width: 200px;} box1 {height: 120px;      
    width:35%;flex-grow:0; flex-shrink:0;} box2 {height: 120px; width: 
    15%;flex-grow:0; flex-shrink:0;} box3 {height: 120px; width: 
    40%;flex-grow:0; flex-shrink:0;}

Cheers, Hans

Upvotes: 2

Views: 116

Answers (1)

P.S.
P.S.

Reputation: 16384

Try to use flex: 0 0 200px; instead of traditional width. It means that element will always be 200px, don't grow and don't shrink

Upvotes: 1

Related Questions