Flexbox, column behave differently than row

Question

It seems like flex-direction: column doesn't work at all. On the other hand flex-direction: row; - works perfectly. You only need to swap "column" for "row" to see it in code below:

.flex-container {
  display: flex;
  flex-direction: column;
  height: 400px;
  background-color: DodgerBlue;
}

.flex-container>div {
  flex-grow: 1;
  background-color: #f1f1f1;
  margin: 10px;
  line-height: 75px;
}

<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

In column mode, display: flex behaving like regular display: block and his children flow-out of him instead of shrinking to fit height or max-height: 400px;

Why is that? And why it works only for "row" mode?

better read the duplicate to understand ;) don't simply take fixes without explanation or you will keep facing the same issue again and again — Temani Afif, Jul 11 '18 at 11:45
?? you set a static height + line-height of 75px to 6 elements + margins This is already much more than the initial 400px. it will overflow anyhow. line-height and margins will not shrink. **If it is about vertical centering also the text , then flexbox can be inbricated and the line-height trick can be thrown away*** .... https://codepen.io/gc-nomade/pen/KBwqdV — G-Cyrillus, Jul 11 '18 at 11:54
@G-Cyr you are right, but height can shrink if we correctly set things (by adding min-height:0) ... actually the issue is that the element cannot shrink past the content size defined by line-height [of course it doens't mean it's a good idea to do this but this explain the behavior] — Temani Afif, Jul 11 '18 at 12:11
@TemaniAfif height can shrink indeed, but with flex-grow:1; there is not even the need to set an height, no matter the number of elements it will fully fill the flex parent .. until content is itself too big ;) I guess you missunderstandood the point of my comment where i did not mention a set height of the children but their height from the content and line-height. I was wondering why line-height? vertical centering ? — G-Cyrillus, Jul 11 '18 at 12:17

score 0 · Accepted Answer · edited Jul 11 '18 at 12:12

Remove the line-height or add overflow: auto to container. Basically it's about hard-coded height of each children making overflowing container.

<!DOCTYPE html>
<html>

<head>
  <style>
    .flex-container {
      display: flex;
      flex-direction: column;
      height: 400px;
      background-color: DodgerBlue;
    }
    
    .flex-container>div {
      flex-grow: 1;
      background-color: #f1f1f1;
      margin: 10px;
    }
  </style>
</head>

<body>
  <h1>Flexible Boxes</h1>

  <div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</body>

</html>

Flexbox, column behave differently than row

1 Answers1