Can we use flex-wrap and flex-shrink on the same flex container?

Frequently Asked Questions CSS FAQ
1

Question

Can we use flex-wrap and flex-shrink on the same flex container?

Answer

We can use flex-wrap and flex-shrink on the same container, flex-wrap does not negate the use of flex-shrink. Take for example an instance where our content would otherwise overflow our container:
HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>My Site - Flexbox</title>
</head>
<body>
<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div class="four">4</div>
</section>
</body>
</html>

CSS with overflowing content:

section {
  display: flex;
  width: 300px;
  border: 1px solid black;
  flex-wrap: wrap; /*content wraps when not enough space is available to have all content on a single line*/
}

div {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  flex-shrink: 0; /*override default to `flex-shrink: 0;` for all divs, divs will not shrink if not enough space is available*/ 
}

.four {
  width: 400px; /*.four div overflows our flex container*/
}

vs
CSS without overflowing content:

section {
  display: flex;
  width: 300px;
  border: 1px solid black;
  flex-wrap: wrap; /*content wraps when not enough space is available to have all content on a single line*/
}

div {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  flex-shrink: 1; /*`flex-shrink` set to 1 (default), divs will shrink if not enough space is available*/ 
}

.four {
  width: 400px; /*.four div no longer overflows our flex container*/
}
4 Likes
2

in this exercise i add flex-shrink: 2; to box elements, but no changes happened, if i shrink browser, the box with warp property just take more line without shrinking box elements and boxes with parent nowarp still shrinking like before. so what notice i miss?

1 Like
3

now try a flex-shrink: 0; instead…
the point is to override the default flex-shrink: 1; value if necessary, and only when the nowrap is declared.

4 Likes
4

aren’t you missing anything? the wrap value doesn’t work, all the divs appear frozen and your code prints to this:

Screenshot 2020-01-24 at 01.07.44
Screenshot 2020-01-24 at 01.07.441248×796 11.3 KB

1 Like
5

yet I’ve fixed the issue in your code by setting the width to 100%

2 Likes
6

thank. yes it works.

7

@aubsrey, Thank you for trying to explain but now I’m kind of confused :confused:. I still do not understand how .four div -which is specified with a width of 400px- does not overflow it’s parent container that has a width of 300px… I thought specifying the width of an element using pixels is like ‘hard-coding’ it. :thinking:

8

@byte4235076416 it’s simple. All flex items by default have a flex-shrink value of 1. So if the div overflows its container it has to be shrinked to fit in. If you want it to overflow you’d have to set the flex-shrink to zero.

You can revise the early lessons on flex box where it is mentioned that when a container’s dimension is specified the flex items shrink to fit in.

6 Likes
9

Is there any way of getting a flex item to shrink to a minimum width before it wraps on to the next line? I tried setting a min-width but it didn’t work.

1 Like
10

Maybe you’re looking for something like this?

It’s not really limiting the amount that an element shrinks so much as setting the minimum width with flex-basis, allowing growth, and setting wrapping in the container.

So in your case you’d just need to set your desired min-width as the flex-basis.

4 Likes
11

[quote=“aubsrey, post:1, topic:370027”]
/*.four div overflows our flex container*
[/quote] yeahnemkmkmlkmlekmelkmklemklemkle

12

Which width did you set to 100%?