Flex 3 columns, one smaller than the rest-CodePudding

I would like to evenly space around using flex on 3 columns but the last column is much smaller than the first 2, so I end up with dead space.

How do I take up the dead space to the right of the last column?

please see pic enter image description here

Here is the code I'm working with now:

#side {
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:space-evenly;
}
#side > div {
  text-align:justify;
  padding:1.5rem;
  width:33.33%;
}

<div id="side">
  <div>long content</div>
  <div>long content</div>
  <div>short</div>
</div>

All 3 columns are equal (33.33%). The last column is much smaller than the first 2 so I would like to reclaim the dead space from the last element. How to do that with flex though?

CodePudding user response：

You want to use flex: 1 in your CSS, which is a shorthand for flex-grow, flex-shrink and some more.
flex: 1 will take up all of the space available. If you would have two columns, column A with flex: 1 and column B with flex: 2, that would mean that column B would take twice as much space as column B.

I can recommend this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

And here is the code: https://jsfiddle.net/4mt20koh