Adding flex-direction: column causes elements to vanish

user_192910 0
Viewed 60

It's my first time using flex-box. I am following a tutorial where this very example works.

I have 3 colo(u)red divs, side by side as is the default for flex-box, apparently.

When I add flex-direction: column; to the container of the divs, they no longer display (for me, although they do in the tutorial video).

I have prepared a Plunker. Just uncomment /*flex-direction: column;*/ to see my problem; here's the full code too.

Any idea what I'm doing wrong?

index.html <!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
  </head>

  <body>
    <h1>Hello Plunker!</h1>

    <section id="container">
      <div id="child_1" class="child"></div>
      <div id="child_2" class="child"></div>
      <div id="child_3" class="child"></div>
    </section>
  </body>
</html>

style.css

#container{
  display: flex;  /* use flex-box */
  width: 100%;
  /*flex-direction: column;*/
}

.child{
  /*width: 200px;*/
  height: 200px;
  width: 100px;
  flex: 1;  /* all available width (will be shared) */
}

#child_1{
  /*height: 150px;*/
  width: 100px;
  background-color: red;
  flex: 2;  /* twice as wide as the others */
}

#child_2{
  background-color: yellow;
}

#child_3{
  background-color: blueviolet;
}
flexbox css
1 Answers

In your code, the flex: 1; and flex: 2; are messing with your heights. There is a reason for that:

in case both flex-basis (other than auto) and width (or height in case of flex-direction: column) are set for an element, flex-basis has priority.

Source: MDN - flex-basis

You could get rid of them, change them to flex-grow or change the flex-basis to see the div back.

#container{
  display: flex;  /* use flex-box */
  width: 100%;
  flex-direction: column;
}

.child{
  /*width: 200px;*/
  height: 200px;
  width: 100px;
  flex-grow: 1;  /* all available width (will be shared) */
}

#child_1{
  /*height: 150px;*/
  width: 100px;
  background-color: red;
  flex-grow: 2;  /* twice as wide as the others */
}

#child_2{
  background-color: yellow;
}

#child_3{
  background-color: blueviolet;
}
<h1>Hello Plunker!</h1>

<section id="container">
  <div id="child_1" class="child"></div>
  <div id="child_2" class="child"></div>
  <div id="child_3" class="child"></div>
</section>

user_71006280
Related