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


#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*/
}