Question 304209 in CSS Question posted in
Some basic documentation can be found here.

Css – Flex-items not shrinking with flex-shrink

I would like to shrink any of these flex items and I can’t seem to manage it even with flex-shrink.

I’ve tried changing the vh and vw of .row (flex parent). I have increased and reduced margins and padding for the flex-items and their content and still, no shrink. I’d love any corrections.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex properties</title>
    <link rel="stylesheet" href="dist/css/styles.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col container--box">
                <h1 class="container--box__text">1</h1>
            </div>
            <div class="col container--box">
                <h1 class="container--box__text">2</h1>
            </div>
            <div class="col container--box">
                <h1  class="container--box__text">3</h1>
            </div>
            <div class="col container--box">
                <h1 class="container--box__text">4</h1>
            </div>
            <div class="col container--box">
                <h1 class="container--box__text">5</h1>
            </div>
        </div>
    </div>
</body>
</html>

body {
  background-color: #a09b9b;
}
body .container {
  border: 2px solid green;
  width: 70vw;
}
body .container .row {
  display: flex;
  flex-flow: row nowrap;
  height: 25vh;
}
body .container .row .col:nth-child(1) {
  flex-shrink: 1;
}
body .container .row .col:nth-child(2) {
  flex-shrink: 1;
}
body .container .row .col:nth-child(3) {
  flex-shrink: 3;
}
body .container .row .col:nth-child(4) {
  flex-shrink: 1;
}
body .container .row .col:nth-child(5) {
  flex-shrink: 1;
}
body .container .row .col {
  background-color: red;
  border: 1px solid black;
  margin: 0;
  padding: 50px;
  height: 20%;
}
body .container .row .col .container--box__text {
  font-size: 30px;
}
Tags:

2

Answers


  1. 0

    To make the flex-shrink property workabl.

    Remove fixed padding from .container--box:

    body .container .row .col .container--box {
  padding: 0;
}

    Here is your updated css code

    body {
  background-color: #a09b9b;
}

body .container {
  border: 2px solid green;
  width: 70vw;
}

body .container .row {
  display: flex;
  flex-flow: row nowrap;
  height: 25vh;
}

body .container .row .col {
  flex: 1;
  flex-basis: 0;
  background-color: red;
  border: 1px solid black;
  margin: 0;
  height: 20%;
}

body .container .row .col .container--box {
  padding: 0;
}

body .container .row .col .container--box__text {
  font-size: 30px;
}
    Login or Signup to reply.
  2. 0

    It looks like you’re trying to use flex-shrink to control the shrinking behavior of flex items, but there are a couple of points to consider:

    • The height of your flex container is set to 25vh, which means 25% of the viewport height. If the content inside the container is larger than this height, it won’t affect the flex-shrink property.
      Flex Items Height:

    • The height property for your flex items is set to 20%. Since you have five flex items, the total height exceeds the container height, and this might be preventing the flex-shrink property from taking effect as expected.

    Here’s an example where I’ve adjusted the container height and the flex item height:

    body {
     background-color: #a09b9b;
}

body .container {
     border: 2px solid green;
     width: 70vw;
}

body .container .row {
     display: flex;
     flex-flow: row nowrap;
     height: 40vh; /* Increased container height */
}

body .container .row .col {
     background-color: red;
     border: 1px solid black;
     margin: 0;
     padding: 20px; /* Reduced padding */
     flex-shrink: 1; /* Added flex-shrink property */
}

body .container .row .col .container--box__text {
     font-size: 30px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search