Flex property doesn't work on flexboxes set to column, but work perfectly fine on rows. What am I doing wrong?

Question

this is my first time working with Flexboxes in HTML. I watched some tutorials and everything seemed to be fairly easy. Now I just wanted to create a small html page using flexboxes to practice it. Right after I started I ran into a problem and I have googled for about an hour now and I can't find anyone mentioning this problem. I have a container flex box that contains 3 more divs. I want them to be displayed below each other and set a size, but if I set "flex-direction:column;" they will adjust their size according to how much text they contain and they don't seem to use the properties I set in my styles.css. If I set "flex-direction:row;" I can change their size using the flex attribute.

Here is my code:

<body>
  <div class="container-1">
    <div class="box-1">
      <span id="title">Titel der notification</span>
      <br>
      <br>
      <span class="validTime">Empfangen:   October 9, 2018 3:40 PM</span><br>
      <span class="validTime">Gültig bis:  Oct 10, 2019, 3:40 PM</span>
      <div style="display:flex">
          <hr style="width:100%; margin-left:30px; margin-right:30px; margin-top:5px">
      </div>
    </div>

    <div class="box-2">
      <p style="margin-left:30px">Nachricht.. blablablabla</p>
    </div>

    <div class="box-3">
        <div style="display:flex">
            <hr style="width:100%; margin-left:30px; margin-right:30px; margin-top:5px">
        </div>
      <span>Verantwortlicher Michael</span><br>
      <span>Verantwortliche Rolle: IT-Administration</span>
    </div>

  </div>

</body>

CSS:

.container-1{
display:flex;
flex-direction:column;
}


.box-1{
flex:60;
}

.box-2{
flex:20;
}

.box-3{
flex:20;
}

Please keep answers simple, I am fairly new to web development.

Thanks in advance!

You need to set a fixed height on your .container-1 see: http://jsfiddle.net/g6ur3oqn/ so the boxes can grow within that container — Julian Espinosa, Oct 11 '18 at 15:08
Thank you for the fast response. Sometimes the solutions are so easy. I watched some 30 minute tutorial on youtube and he always worked with rows and didn't set a height so I assumed it works the same for columns. — stinsfire, Oct 11 '18 at 15:13
add flex-flow: column wrap; see the code: http://jsfiddle.net/Lo2xz5jf/. you can also find more information here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Pengcheng, Oct 11 '18 at 15:44
Here's the full explanation (in a short answer): https://stackoverflow.com/a/46546152/3597276 — Michael Benjamin, Oct 11 '18 at 21:29

score 0 · Answer 1 · answered Oct 11 '18 at 15:47

.container-1 {
     display: flex;
     /* Then we define the flow direction 
      * and if we allow the items to wrap 
      * Remember this is the same as:
      * flex-direction: column;
      * flex-wrap: wrap;
     */
     flex-flow: column wrap;

     /* Then we define how is distributed the remaining space */
     justify-content: space-around;
}

score 0 · Answer 2 · answered Oct 12 '18 at 06:43

display flex should be added to the parent class and no need of adding flex-direction: column .hope this will work for you.

.container-1{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
/* flex-direction:column; */
}
.box-1{
  flex: 60;
  background: antiquewhite;
  flex-wrap: wrap;
}
.box-2{
  flex: 20;
  background: aqua;
  padding: 18px;
}
.box-3{
  flex: 20;
  background: lavender;
  padding: 18px;
}

 <div class="container-1">
    <div class="box-1">
      <span id="title">Titel der notification</span>
      <br>
      <br>
      <span class="validTime">Empfangen:   October 9, 2018 3:40 PM</span><br>
      <span class="validTime">Gültig bis:  Oct 10, 2019, 3:40 PM</span>
      <div>
          <hr style="width:100%; margin-top:5px">
      </div>
    </div>

    <div class="box-2">
      <p style="margin-left:30px">Nachricht.. blablablabla</p>
    </div>

    <div class="box-3">
        <div>
            <hr style="width:100%; margin-left:-12px;margin-top:5px">
        </div>
      <span>Verantwortlicher Michael</span><br>
      <span>Verantwortliche Rolle: IT-Administration</span>
    </div>

  </div>

Flex property doesn't work on flexboxes set to column, but work perfectly fine on rows. What am I doing wrong?

2 Answers2