How to Disable Equal Height Columns in Flexbox

How to disable equal height columns in Flexbox?

You're encountering the flex equal height columns feature.

An initial setting of a flex container is align-items: stretch.

This means that flex items automatically expand the full length of the cross axis of the container. In a row-direction container, the cross axis is vertical (height).

The tallest item sets the height for all siblings. As the tallest item expands, its siblings follow along. Hence, equal height for all items.

To override this default setting, add align-items: flex-start to the flex container:

#container_add_movies {
   display: flex;
   align-items: flex-start;
}

#container_add_movies {
  display: flex;
  align-items: flex-start;       /* NEW */
}

#container_add_movies #feedback {
  width: 20%;
  background-color: green;
  display: block;
}

#container_add_movies #search {
  width: 60%;
  background-color: red;
}

#container_add_movies #suggestions {
  width: 20%;
  background-color: yellow;
}

<div id='container_add_movies'>
  <div id='feedback'>Feedback</div>
  <div id='search'>
    Search<br>Search<br>Search<br>Search<br>Search<br> Search
    <br>Search<br>Search<br>Search<br>Search<br>
  </div>
  <div id='suggestions'>Suggestions</div>
</div>

How to prevent flexbox from being equal height with the flexbox next to it?

You need to add align-self: flex-start; to the inside flex boxes. This overrules the default value align-self: stretch;

Here is an example:

#outsideFlexBox {  display: flex;}
.insideFlexBox {  display: flex;  align-self: flex-start;  margin: 10px;  padding: 10px;  background-color: #33FFCC;}

<div id="outsideFlexBox">  <div class="insideFlexBox">    <ul>      <li>Item 1</li>      <li>Item 2</li>      <li>Item 3</li>      <li>Item 4</li>      <li>Item 5</li>    </ul>  </div>  <div class="insideFlexBox">    <ul>      <li>Item 1</li>      <li>Item 2</li>      <li>Item 3</li>    </ul>  </div></div>

Prevent a flex items height from expanding to match other flex items

This is an old solution.
My answer is superseded by this new answer by Aaron using align-self. That is a better solution that does not rely on a CSS quirk.

As long as the flex container has no height itself, you can set height: 0% on the first flex item. Because it has no height to inherit from its parent, any percentage height will cause it to collapse. It will then grow with its contents.

Example

In this example I have removed the -webkit prefix. It's only really required for Safari and the prefix can be added above the non-prefixed version. I also removed flex-direction: row as it is the default value.

.container {
  display: flex;
}
.flexbox-1 {
  flex: 1;  
  height: 0%;  
  border: solid 3px red;
}
.flexbox-2 {
  flex: 2;
  border: solid 3px blue;
  height: 200px;
  margin-left: 10px;
}

<div class="container">
  <div class="flexbox-1">.flexbox-1</div>
  <div class="flexbox-2">.flexbox-2</div>
</div>

How to create two side by side columns which are not equal in height using flex?

You add to .column-layout align-items: flex-start;.

This will cause all items of flex container to be positioned at the beginning of the container. However if you want only a certain child to be positioned at the start of the container you add align-self: flex-start

.column-layout{    display: flex;    align-items: flex-start;}.one{    background-color: blue;    flex: 3;}.two{    background-color: red;    flex: 1;}

<div class='column-layout'>  <div class='one'>    <p>Hello</p>    <p>Hello</p>    <p>Hello</p>    <p>Hello</p>    <p>Hello</p>    <p>Hello</p>    <p>Hello</p>    <p>Hello</p>  </div>    <div class='two'>      <p>Hello</p>      <p>Hello</p>      <p>Hello</p>    </div></div>

Avoid same width on child elements on flex with flex-direction column

You can align the flex items to flex-start in order to make the divs the same width as the content.

 nav {
   align-items: flex-start;
 }

How to disable same height columns in bootstrap 4.0

On Bootstrap 4 there are flexbox utilities, so you can add .align-items-start to the .row:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row align-items-start">
  <div class="col-lg-4 col-md-4 col-sm-4 hidden-xs-down">
      Some content on the left that's going to be smaller than right
  </div>
  <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
     A <br/>
     B <br/>
     C <br/>
     D <br/>
     E <br/>
     F <br/>
  </div>
</div>

Make flex child equal height of parent inside of grid column

Add flex-grow : 1; to your .card rule. HTML markup is fine.

.row {
  display: flex; 
  flex-flow: row wrap; 
  background: #00e1ff;
  margin: -8px;
}
.col { 
  display: flex; 
  flex: 1 0 400px;
  flex-flow: column; 
  margin: 10px;
  background: grey;
}
.card {
  display: flex;
  padding: 20px;
  background: #002732;
  color: white;
  opacity: 0.5;
  align-items: stretch;
  flex-direction: column;
  flex-grow: 1;
}

You may also look at Foundation 6 Equalizer plugin. They use JavaScript though.

How to Disable Equal Height Columns in Flexbox