CODEWITHSUNDEEP
htmlcssflexboxalignment
Mario Parra
Mario Parra

Reputation: 1554

Stretch flexbox child to fill column height

I'm building a flexbox three-column layout that contains cards and all the cards are the same height (inspect .card), but visually, they're not since the .card-info elements vary in height and have a background colour.

I'm looking for a way to automatically stretch the height of .card-info to fill the remaining space below it within .card.

In case anyone suggests it, I can't set the background colour on .card since I'm implementing a flip animation and the card doesn't animate properly with it.

CSS:

.events-row {
  display: flex;
  justify-content: space-around;
}
.events-row .card {
  flex-basis: 31.3%;
  position: relative;
}
.events-row .card .card-info {
  padding: 15px;
  background-color: grey;
  text-align: left;
  font-size: 1rem;
  color: white;
}
.events-row .card .card-info .button-cont {
  text-align: center;
}
.events-row .card .card-info .button-cont .button {
  display: inline-block;
  margin: 30px;
  padding: 10px 30px;
  font-size: 1em;
}

Structure:

<div id="events-cont">
  <div class="events-row">
    <div class="card">
      <div class="card-img four-three-img">
            <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Event%20Photo&w=600&h=400" /></a>
          </div>
          <div class="card-info">
            <h2>Event title</h2>
            <h3>Event date</h3>
            <h3>Event venue</h3>
            <p>
              Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
            </p>
      </div>
    </div>
  </div>
</div>

Demo: http://codepen.io/ourcore/pen/xgLyMW

Upvotes: 4

Views: 5639

Answers (3)

Sergi
Sergi

Reputation: 1240

You just need to add 3 lines in your CSS:

.card {
        flex-basis: 31.3%;
        position: relative;
        display: flex;
        flex-direction: column;


        .card-info {
            padding: 15px;
            background-color: grey;
            text-align: left;
            font-size: 1rem;
            color: white;
            flex-grow: 1;

Make the cards themselves to be flex, then set them to column so nothing changes visually, but set the flex-grow of the info section to be of 1.

Upvotes: 2

kukkuz
kukkuz

Reputation: 42352

You can make nested flexboxes till front and make it a column flexbox, and you can add flex: 1 to the card-info element:

.events-row .card {
    display: flex;
}
.events-row .card .card-flip-cont {
  display: flex;
}
.events-row .card .card-flip-cont .front{
  display: flex;
  flex-direction: column;
}
.events-row .card .card-info{
  flex: 1;
}

See demo below after adding in these styles:

.events-row {
  display: flex;
  justify-content: space-around;
}
.events-row .card {
  flex-basis: 31.3%;
  position: relative;
}
.events-row .card .card-img {
  position: relative;
}
.events-row .card .card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.events-row .card .card-img .series-caption {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 10px;
  width: auto;
  font-size: 1em;
  color: white;
}
.events-row .card .card-info {
  padding: 15px;
  background-color: grey;
  text-align: left;
  font-size: 1rem;
  color: white;
}
.events-row .card .card-info h1,
.events-row .card .card-info h2 {
  padding-bottom: 0;
}
.events-row .card .card-info h2 {
  font-size: 1.75em;
  color: black;
}
.events-row .card .card-info h3 {
  font-size: 1.1em;
  line-height: 1.5;
}
.events-row .card .card-info p {
  padding: 15px 0;
}
.events-row .card .card-info p a {
  font-size: 1.1em;
}
.events-row .card .card-info .button-cont {
  text-align: center;
}
.events-row .card .card-info .button-cont .button {
  display: inline-block;
  margin: 30px;
  padding: 10px 30px;
  font-size: 1em;
}

/*NEW STYLES*/

.events-row .card {
    display: flex;
}
.events-row .card .card-flip-cont {
  display: flex;
}
.events-row .card .card-flip-cont .front{
  display: flex;
  flex-direction: column;
}
.events-row .card .card-info{
  flex: 1;
}
<div id="events-cont">
  <div class="events-row">
    <div class="card">
      <div class="card-flip-cont">
        <div class="front">
          <div class="card-img four-three-img">
            <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Event%20Photo&w=600&h=400" /></a>
          </div>
          <div class="card-info">
            <h2>Event title</h2>
            <h3>Event date</h3>
            <h3>Event venue</h3>
            <p>
              Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
            </p>
          </div>
        </div>
      </div>
    </div>
    
    <div class="card">
      <div class="card-flip-cont">
        <div class="front">
          <div class="card-img four-three-img">
            <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Event%20Photo&w=600&h=400" /></a>
          </div>
          <div class="card-info">
            <h2>Event title</h2>
            <h3>Event date</h3>
            <h3>Event venue</h3>
            <p>
              Cu cum quem eros periculis, volutpat tractatos accommodare eu has, ex singulis assueverit usu.
            </p>
            <div class="button-cont">
              <div class="button purple-button">Buy Tickets</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

surfthecity
surfthecity

Reputation: 160

Probably not ideal, but you could:

.card-flip-cont {
  height:100%;
}
.front {
  height:100%;
  overflow-y:hidden;
}
.card-info {
  height:100%;
}

Upvotes: 0

Related Questions