Flex-Grow Not Working in Column Layout

flex-grow not working in column layout

Everything in your code is working fine.

The only issue is that your flex container has no specified height. Therefore, the height resolves to auto, meaning the height of the content.

The flex-grow property distributes free space in the container. With no free space in your container, flex-grow has nothing to do.

Try this adjustment to your CSS:

.analysis {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

This tells the flex container to be the height of the viewport. Now the height of the container is taller than the height of the content, and you will notice flex-grow doing its work.

Revised Fiddle

Learn more about the height: auto default on most elements.

Flex-grow does not work for column direction

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>

flex-grow not expanding flex item

The main problem in your code is that you didn't specify display: flex on the #main container.

Therefore, the element is not a flex container, flex-direction: column is ignored, and the children are not flex items.

Keep in mind that flex properties work only between parent and child elements. So your display: flex on the body element applies only to the children, but not other descendants.

body {  display: flex;  flex-direction: column;  height: 100vh;  margin: 0;}
header {  flex: 0 0 60px;               /* flex-grow, flex-shrink, flex-basis */  background-color: lightgray;}
main {  flex-grow: 1;  background-color: aqua;  display: flex;                 /* key addition */  flex-direction: column;}
#box_1, #box_3 {  flex: 0 0 60px;  background-color: red;}
#box_2 {  flex-grow: 1;  background-color: blue;}

<header></header><main>  <div id="box_1"></div>  <div id="box_2"></div>  <div id="box_3"></div></main>

Flexbox row: doesn't grow according to content?

If you want your container to always match the width of it's children, you'll need to look into display: inline-flex.

display: flex behaves more like a container with a width of 100%

Here's a fiddle that should work:
http://jsfiddle.net/hnrs64fm/

Flexbox flex-grow property not respected when flex item contains an input element

You may use the flex shorthand flex:2 / flex: 5 instead flex-grow:2 / flex-grow:5 .

It will avoid to have to set flex-shrink and flex-basis too.

flex items not expanding or shrinking with flex-grow

There are two pieces missing in this puzzle.

You have the column widths set to flex-grow: 1. This means that flex-basis is still at its default value, auto (content-based). So the column is sized based on the image size. You can add flex-basis: 0, or just use flex: 1.
Full explanation: Make flex-grow expand items based on their original size

Flex items, by default, cannot shrink below the size of their content. Their initial setting is min-width: auto. You need to override this default with min-width: 0.
Full explanation: Why don't flex items shrink past content size?

.row {
  display: flex;
  height: 100vh;
}

.column {
  min-width: 0; /* new */
  flex: 1;      /* adjustment */
  border: 2px solid #000;
  transition: all 300ms ease-in-out;
}

.column:hover {
  flex-grow: 4.3;
}

body {
  margin: 0;
}

<div class="row">
  <div class="column">
    <img src="https://images.pexels.com/photos/2194261/pexels-photo-2194261.jpeg">
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/1276553/pexels-photo-1276553.jpeg">
  </div>
  <div class="column">
    <img src="https://images.pexels.com/photos/774731/pexels-photo-774731.jpeg">
  </div>
</div>

CSS flex grow does not work with added div on top

In your div with class col-wrapper-outer, instead of this:

.col-wrapper-outer {
  display: flex;
  flex-wrap: wrap;
}

Use this:

.col-wrapper-outer {
  display: flex;
  flex-direction: column;
}

Then add flex: 1 to .col-wrapper so it takes the full height of the container.

revised fiddle

.row-wrapper {  display: flex;}
.col-wrapper-outer {  display: flex;  /* flex-wrap: wrap; */  flex-direction: column;    /* NEW */}
.arrow-wrapper {  width: 100%;  text-align: center;  font-size: 30px;}
.col-wrapper {  flex: 1;                   /* NEW */  width: 100%;  display: flex;  flex-direction: column;  border: 2px solid red;  color: white;}
.col-wrapper .header {  background: blue;}
.col-wrapper .contents {  flex: 1 0 auto;  background: green;}

<div class="row-wrapper">  <div class="col-wrapper-outer">    <div class="arrow-wrapper">      ↓    </div>    <div class="col-wrapper">      <div class="header">Please align tops.</div>      <div class="contents">Let me grow.</div>    </div>  </div>  <div class="col-wrapper-outer">    <div class="arrow-wrapper">      ↓    </div>    <div class="col-wrapper">      <div class="header">please align tops.</div>      <div class="contents">Let me grow.        <br>Please        <br>align        <br>bottoms.</div>    </div>  </div></div>

Flexbox: flex-flow column; flex-basis 100% not working without explicit height

grid and mediaquerie is , IMHO, a good way to manage the swhitching from a 1 column layout to a 2 columns layout.

Demo of the idea :

:root {/* possible use of var here */--col1 : 1fr;--col2 : 2fr;}main {  display: grid;  grid-template-columns: var(--col1) var(--col2);}main> * {  border:solid 1px;  margin:2px;}section {  grid-column:1;}article {  grid-column:2;  grid-row:1 / 10;}
/* breakpoint at 768px */@media screen and (max-width: 768px) {  main {    display: flex;    flex-flow: column;  }  main section + section {/* best is to use an id */    order: 1;  }}

<main>  <section>    <h1>About</h1>    <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>  </section>  <section><! -- that one might deserve an id to easy reorder its position -->    <h1>Disclaimer</h1>    <p>Here there be naughty things!!!</p>  </section>  <article class="blog">    <h1>Blog Entry</h1>    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend molestie orci. Donec pellentesque viverra magna, nec viverra velit laoreet non. Etiam blandit erat nulla, semper faucibus eros rhoncus vel.</p>  </article>
</main>

Flex-Grow Not Working in Column Layout