Flex-grow does not work for column direction

Question

I am trying to learn the flexbox layout. I saw a tutorial speaks about flex-grow and flex-shrink classes and all provided examples in this course works fine with flex-direction: row.

I tried to apply them with flex-direction: column, but it does not work as I wanted. I googled it, but I didn't find a suitable answer to grow a flex item when the direction is set it up as a column.

My code is below. Could anyone fix my CSS to get flex-grow/shrink work in column direction please?

html,
body {
    padding: 0;
    margin: 0;
    font-family: arial, sans-serif;
}

.flex-container {
    display: flex;
    border:solid 4px #000;
    flex-direction: column;
    height: 100%;

}

.flex-item {
    color: #eee;
    font-size: 1.2em;
    padding: 1em;
    text-align: center;
    justify-content: center;
    flex-grow: 1;
}

.flex-item:nth-child(1) {
    background-color: #A62E5C;
    flex-grow: 3;
}

.flex-item:nth-child(2) {
    background-color: #9BC850;
}

.flex-item:nth-child(3) {
    background-color: #675BA7;
}
.flex-item:nth-child(4) {
    background-color: #620542;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container-fluid">
        <div class="flex-container">
            <div class="flex-item">Flex 1</div>
            <div class="flex-item">Flex 2</div>
            <div class="flex-item">Flex 3</div>
            <div class="flex-item">Flex 4</div>
        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</html>

In case you are confused about the duplicate, the issue is you need to set an explicit height on the flex container. 100% is a relative height that inherits from its ancestor. You have no explicit height set for any of the ancestors, so it doesn't know how much to grow. — TylerH, Sep 07 '18 at 14:14
Yep, I tried that after I posted my question and it works, sorry it was a dump question thanks anyway :) — Adouani Riadh, Sep 07 '18 at 14:17

Temani Afif · Accepted Answer · 2018-09-07T14:18:05.760

It works but you won't see anything different because flex-grow will consider the free space to make the element growing and by default there is no free space in a column direction since the height is defined by content unlike when using a row direction where the width is usually 100% and we have free space.

Also, in your case you used height:100% and since there is no height defined on the parent element it will fallback to auto thus it will be the height of the content and the logic above will apply.

Use a fixed height and you will see the effect:

html,
body {
  padding: 0;
  margin: 0;
  font-family: arial, sans-serif;
}

.flex-container {
  display: flex;
  border: solid 4px #000;
  flex-direction: column;
  height: 600px;
}

.flex-item {
  color: #eee;
  font-size: 1.2em;
  padding: 1em;
  text-align: center;
  justify-content: center;
  flex-grow: 1;
}

.flex-item:nth-child(1) {
  background-color: #A62E5C;
  flex-grow: 3;
}

.flex-item:nth-child(2) {
  background-color: #9BC850;
}

.flex-item:nth-child(3) {
  background-color: #675BA7;
}

.flex-item:nth-child(4) {
  background-color: #620542;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="container-fluid">
    <div class="flex-container">
      <div class="flex-item">Flex 1</div>
      <div class="flex-item">Flex 2</div>
      <div class="flex-item">Flex 3</div>
      <div class="flex-item">Flex 4</div>
    </div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</html>

And in order to fix the height:100% you need to add it to parent elements:

html,
body {
  padding: 0;
  margin: 0;
  font-family: arial, sans-serif;
  height: 100%;
}
.container-fluid {
  height: 100%;
}
.flex-container {
  display: flex;
  border: solid 4px #000;
  flex-direction: column;
  height: 100%;
}

.flex-item {
  color: #eee;
  font-size: 1.2em;
  padding: 1em;
  text-align: center;
  justify-content: center;
  flex-grow: 1;
}

.flex-item:nth-child(1) {
  background-color: #A62E5C;
  flex-grow: 3;
}

.flex-item:nth-child(2) {
  background-color: #9BC850;
}

.flex-item:nth-child(3) {
  background-color: #675BA7;
}

.flex-item:nth-child(4) {
  background-color: #620542;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="container-fluid">
    <div class="flex-container">
      <div class="flex-item">Flex 1</div>
      <div class="flex-item">Flex 2</div>
      <div class="flex-item">Flex 3</div>
      <div class="flex-item">Flex 4</div>
    </div>
  </div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</html>

The flex-grow CSS property specifies the flex grow factor of a flex item. It specifies how much of the available space in the flex container should be assigned to that item.^ref

Flex-grow does not work for column direction

1 Answers1