How to create a flexible element that is compressed before it is wrapped?

Question

As you can see in this JS-Fiddle , I'm basically trying to use this CSS to create two divs that should fill these requirements:

• If twice the space of the wider element is available, then both should use a width of 50% (which works)
• If there is not enough space for both elements, they should wrap up (which works)
• If enough space is available for both elements, but less than the width of the wider width, the narrower element should decrease (this does NOT work, it wraps).

I do not understand this behavior because I installed flex-shrink for flex elements, so they should be able to compress, but they do not: if the narrower element will be less than 50% hoops.

 .m { display: flex; flex-wrap: wrap; } .l_1 { background-color: red; flex: 1 1 50%; } .r_1 { background-color: yellow; flex: 1 1 50%; } 

 <div class=m> <div class=l_1> left_______________________________________________X </div> <div class=r_1> right </div> </div> 

(Tested in Firefox and Chrome)

Answer 1

The problem is not flex-shrink . flex-basis task. You have 50% installed.

This means that flex-grow will add free space to the flex-basis , and each element will be quickly wrapped before it can be compressed.

Switch from flex-basis: 50% to flex-basis: 0 .

In particular, instead of flex: 1 1 50% use flex: 1 , which breaks down into this:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

flex-grow distributes free space equally - not proportionally - for both elements, and they can be compressed before they are wrapped.

(Here's a more detailed explanation: Make flex-grow expand elements based on their original size )

 .m { display: flex; flex-wrap: wrap; } .l_1 { background-color: red; flex: 1; } .r_1 { background-color: yellow; flex: 1; } 

 <div class=m> <div class=l_1>left_______________________________________________X</div> <div class=r_1>right</div> </div> 

modified script

Answer 2

Flex-shrink will not be used with flex-wrap: wrap . Instead, it will wrap strings.

The only exception is when you have only one flexible item per line. This should then allow the use of flexible shrink film.

Perhaps a suitable fix is ​​only to use flex-wrap in a media query, so this only happens in small viewports?

Answer 3

When the wrapper is on, it replaces the abbreviation, so when there is a condition that will lead to the abbreviation, it wraps instead - until there is only one element in the line, and if it is even more than the container, then it will be abbreviated.

So, you need to set the flex-basis for all blocks to the minimum size that should be before the block. Note. A box will never shrink further than its minimum content width , which means you can set flex-basis to 0 , and it will correspond to the minimum width of the contents of each window.

Then, if you want the boxes to expand to fill the available space, use the flex-grow property (the first value in flex ) to control the relative amount by which each should grow.