Inserting divs into flex regular columns: column width and overflow problems

Question

I need to put 3 columns inside a container. They are supposed to have the same width and evenly distributed. I use flex for that and it works fine.

In the end I need to insert a collection of "cards" in each column ... Because the number of cards can cause the columns to have a greater height than what can be displayed in the browser, the container (the parent of the columns) has overflow set to scroll. So when that happens you can still scroll down to look at the cards that are at the bottom of the column.

I have two problems that I'd like to fix:

1) As soon as I insert a card in the left column, that columns becomes larger than the other two. If I set the column to flex and set flex-grow to 0 on the card, it makes no difference. I am not sure why?

EDIT:

I fixed #1 by setting width: 33%; on .column.

===========================================================================

2) The left column is not drawn passed the bottom boundary of the browser, even though it contains cards causing the container to potentially overflow. What I want to do is be sure that the column "contains" the cards. How could I achieve that (using flex or not)?

I created a fidle and illustrated this problem with the figure below.

JSFIDDLE is here

Asons · Accepted Answer · 2017-09-27T20:28:41.713

1) As soon as I insert a card in the left column, that columns becomes larger than the other two. If I set the column to flex and set flex-grow to 0 on the card, it makes no difference. I am not sure why?

flex-grow does not define the width, it define how the available space should be distributed.

You could use flex-basis: 33.333%

2) The left column is not drawn passed the bottom boundary of the browser, even though it contains cards causing the container to potentially overflow. What I want to do is be sure that the column "contains" the cards. How could I achieve that (using flex or not)?

Change the height: 100% on container to min-height: 100%

Stack snippet

html, body
{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
}

.container
{
 display: flex;
 flex-direction: row;
 border: 2px solid black;
 overflow: scroll;
 padding: 0;
 margin: 0;
 min-height: 100%;                  /*  changed  to 'min-height'  */
 width: 100%;
 box-sizing: border-box;
}

.column
{
 display: flex;
 flex-direction: column;
 flex: 1 1 auto;
 background: grey;
 margin: 5px;
}

.article
{
 margin: 5px;
 background: white;
 height: 100px;
 border: 1px solid orange;
}

<div class="container">


 <div class="column">
  <div class="article">article1</div>
  <div class="article">article2</div>
  <div class="article">article3</div>
  <div class="article">article4</div>
  <div class="article">article5</div>
  <div class="article">article6</div>
  <div class="article">article7</div>
  
 </div>
 <div class="column">col 2</div>
 <div class="column">col 3</div>

</div>

Thanks to LGSon and Michael B. I would have never thought trying out `min-height`. Worked great. Cheers. — user18490, Sep 27 '17 at 20:27

Michael Benjamin · Answer 2 · 2017-09-27T20:29:21.550

To make the columns equal width, instead of flex: 1 1 auto, use flex: 1 1 0 (which is the same as flex: 1).

With flex-basis: auto the width of each column is based on its content, so equal width columns aren't guaranteed.

With flex-basis: 0, the width of all columns is an equal distribution of space in the container.

Here's a more complete explanation of flex-basis and the difference between auto and 0.

Make flex-grow expand items based on their original size

To make the divs respect their height: 100px, add flex-shrink: 0. Flex items have flex-shrink: 1, by default.

Here's a more complete explanation:

What are the differences between flex-basis and width?

To get the container to follow along, see the other answer to this question.

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: row;
  border: 2px solid black;
  overflow: scroll;
  padding: 0;
  margin: 0;
  min-height: 100vh;
  box-sizing: border-box;
}

.column {
  display: flex;
  flex-direction: column;
  background: grey;
  margin: 5px;
  flex: 1;   /* adjustment */
}

.article {
  margin: 5px;
  background: white;
  border: 1px solid orange;
  flex: 0 0 100px;   /* adjustment */
}

<div class="container">
  <div class="column">
    <div class="article">article1</div>
    <div class="article">article2</div>
    <div class="article">article3</div>
    <div class="article">article4</div>
    <div class="article">article5</div>
    <div class="article">article6</div>
    <div class="article">article7</div>
  </div>
  <div class="column">col 2</div>
  <div class="column">col 3</div>
</div>

Inserting divs into flex regular columns: column width and overflow problems

EDIT:

2 Answers2