CODEWITHSUNDEEP
htmlcssflexbox
Tyson Nero
Tyson Nero

Reputation: 2078

Grow flexbox container height without row content overflowing

I have a flexbox page element with a min-height with a container that contains rows, and the rows contain events. The row heights are evenly distributed against the height of the container as in this example:

http://codepen.io/tysonnero/pen/LWXaMG

HTML

<div class="page">
  <div class="container">
    <div class="row">
      <div class="event">Event 1</div>
      <div class="event">Event 2</div>
    </div>
    <div class="row">
      <div class="event">Event 1</div>
    </div>
    <div class="row">
      <div class="event">Event 1</div>
    </div>
    <div class="row">
      <div class="event">Event 1</div>
    </div>
  </div>
</div>

CSS

.page {
  min-height: 300px;
  display: flex;
}

.container {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: solid 1px #eee;
}

.row {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: solid 1px #eee;
}

However, if I add several additional events to the row, the events overflow into the next row as so:

http://codepen.io/tysonnero/pen/bqQyeG

HTML

<div class="page">
  <div class="container">
    <div class="row">
      <div class="event">Event 1</div>
      <div class="event">Event 2</div>
      <div class="event">Event 3</div>
      <div class="event">Event 4</div>
      <div class="event">Event 5</div>
      <div class="event">Event 6</div>
    </div>
    <div class="row">
      <div class="event">Event 1</div>
    </div>
    <div class="row">
      <div class="event">Event 1</div>
    </div>
    <div class="row">
      <div class="event">Event 1</div>
    </div>
  </div>
</div>

I can fix that by removing display:flex from the .page, but that causes the row to not evenly distribute the min-height when the row content is minimal.

Can anything recommend the best working approach to this?

Upvotes: 2

Views: 1832

Answers (2)

Michael Coker
Michael Coker

Reputation: 53674

Looks like you just want to remove the flex: 1 property from .row, use the specific properties flex is short for (like flex-grow: 1), or specify each of the values you want to use in the shorthand property.

.page {
  min-height: 300px;
  display: flex;
}

.container {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: solid 1px #eee;
}

.row {
  display: flex;
  flex-direction: column;
  border: solid 1px #eee;
  flex-grow: 1;
}
<div class="page">
  <div class="container">
    <div class="row">
      <div class="event">Event 1</div>
      <div class="event">Event 2</div>
      <div class="event">Event 3</div>
      <div class="event">Event 4</div>
      <div class="event">Event 5</div>
      <div class="event">Event 6</div>
    </div>
    <div class="row">
      <div class="event">Event 1</div>
    </div>
    <div class="row">
      <div class="event">Event 1</div>
    </div>
    <div class="row">
      <div class="event">Event 1</div>
    </div>
  </div>
</div>

Upvotes: 1

hungerstar
hungerstar

Reputation: 21685

Update .row's flex property to flex: 1 0 auto;.

The flex property is shorthand for flex-grow, flex-shrink and flex-basis. By setting the second value to 0 we're telling those flex items not to shrink and maintain their original size.

.page {
  min-height: 300px;
  display: flex;
}

.container {
  display: flex;
  flex: 1;
  flex-direction: column;
  border: solid 1px #eee;
}

.row {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  border: solid 1px #eee;
}
<div class="page">
  <div class="container">
    <div class="row">
      <div class="event">Event 1</div>
      <div class="event">Event 2</div>
      <div class="event">Event 3</div>
      <div class="event">Event 4</div>
      <div class="event">Event 5</div>
      <div class="event">Event 6</div>
    </div>
    <div class="row">
      <div class="event">Event 1</div>
      <div class="event">Event 1</div>
      <div class="event">Event 1</div>
    </div>
    <div class="row">
      <div class="event">Event 1</div>
    </div>
    <div class="row">
      <div class="event">Event 1</div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions