CODEWITHSUNDEEP
htmlcssflexbox
wharfdale
wharfdale

Reputation: 752

Column content wrapper not growing with flex

I'm trying to have my content wrapper card__header grow with flex. To take up the remaining height, so the card__cta is always at the bottom, all 3 in line as with the container heights.

My attempt have been to use:

.card__content-wrapper {
    display: flex;
    flex-direction: column;
}

This doesn't make the wrapper extend to the full height of the column. I think I need this sorted first before the CTA's can go to the bottom of the columns.

Demo URL: http://1514531d.ngrok.io/testing123/columndev/

.events-grid__grid {
  -ms-flex-wrap: wrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.events-grid__card {
  -ms-flex: 0 0 33.33333%;
  -webkit-box-flex: 0;
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

.card__wrapper {
  height: 100%;
  padding: 0;
}

.card__content-wrapper {
  padding: 15px 0 0;
}

.card__header {}
<div class="events-grid__grid">
  <div class="card events-grid__card">
    <div class="card__wrapper">
      <div class="card__media-wrapper"><img alt="Triple Cooked: Dalston Roof Park – August Special" class="card__media card__media--image" src="http://sheffield.theviperrooms.com/wp-content/uploads/2018/01/fav-homepage.png"></div>
      <div class="card__content-wrapper">
        <div class="card__header">
          <h3 class="card__heading heading"><a class="heading-link" href="/testing123/event/triple-cooked-dalston-roof-park-august-special/">Triple Cooked: Dalston Roof Park – August Special</a><br></h3>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p></p>
        </div>
        <div class="card__cta">
          <a class="card__button" href="#">Read More<span class="button__arrow"></span></a>
        </div>
        <p></p>
      </div>
      <p></p>
    </div>
    <p></p>
  </div>
  <div class="card events-grid__card">
    <div class="card__wrapper">
      <div class="card__media-wrapper"><img alt="Triple Cooked: Dalston Roof Park – August Special" class="card__media card__media--image" src="http://sheffield.theviperrooms.com/wp-content/uploads/2015/04/image2.jpg"></div>
      <div class="card__content-wrapper">
        <div class="card__header">
          <h3 class="card__heading heading"><a class="heading-link" href="/testing123/event/triple-cooked-dalston-roof-park-august-special/">Triple Cooked: Dalston Roof Park – August Special</a><br></h3>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p></p>
        </div>
        <div class="card__cta">
          <a class="card__button" href="#">Read More<span class="button__arrow"></span></a>
        </div>
        <p></p>
      </div>
      <p></p>
    </div>
    <p></p>
  </div>
  <div class="card events-grid__card">
    <div class="card__wrapper">
      <div class="card__media-wrapper"><img alt="Triple Cooked: Dalston Roof Park – August Special" class="card__media card__media--image" src="http://sheffield.theviperrooms.com/wp-content/uploads/2016/09/saturdays-box.png"></div>
      <div class="card__content-wrapper">
        <div class="card__header">
          <h3 class="card__heading heading"><a class="heading-link" href="/testing123/event/triple-cooked-dalston-roof-park-august-special/">Triple Cooked: Dalston Roof Park – August Special</a><br></h3>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p></p>
        </div>
        <div class="card__cta">
          <a class="card__button" href="#">Read More<span class="button__arrow"></span></a>
        </div>
        <p></p>
      </div>
      <p></p>
    </div>
    <p></p>
  </div>
  <p></p>
</div>

Upvotes: 1

Views: 86

Answers (1)

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

Adding display: flex; and flex-direction: column; will get you close but you need a couple more changes:

  • .card__content-wrapper requires a height, otherwise there is no space for its children to grow into. To do this you need to add display: flex; and flex-direction: column; to .card__wrapper and flex-grow: 1; to .card__content-wrapper
  • .card__header will need flex-grow: 1; to enable it to take up the spare space and push .card__cta to the bottom

.events-grid__grid {
  -ms-flex-wrap: wrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.events-grid__card {
  -ms-flex: 0 0 33.33333%;
  -webkit-box-flex: 0;
  flex: 0 0 33.33333%;
  max-width: 33.33333%;
}

.card__wrapper {
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.card__content-wrapper {
  padding: 15px 0 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card__header {
  flex-grow: 1;
}
<div class="events-grid__grid">
  <div class="card events-grid__card">
    <div class="card__wrapper">
      <div class="card__media-wrapper"><img alt="Triple Cooked: Dalston Roof Park – August Special" class="card__media card__media--image" src="http://sheffield.theviperrooms.com/wp-content/uploads/2018/01/fav-homepage.png"></div>
      <div class="card__content-wrapper">
        <div class="card__header">
          <h3 class="card__heading heading"><a class="heading-link" href="/testing123/event/triple-cooked-dalston-roof-park-august-special/">Triple Cooked: Dalston Roof Park – August Special</a><br></h3>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p></p>
        </div>
        <div class="card__cta">
          <a class="card__button" href="#">Read More<span class="button__arrow"></span></a>
        </div>
        <p></p>
      </div>
      <p></p>
    </div>
    <p></p>
  </div>
  <div class="card events-grid__card">
    <div class="card__wrapper">
      <div class="card__media-wrapper"><img alt="Triple Cooked: Dalston Roof Park – August Special" class="card__media card__media--image" src="http://sheffield.theviperrooms.com/wp-content/uploads/2015/04/image2.jpg"></div>
      <div class="card__content-wrapper">
        <div class="card__header">
          <h3 class="card__heading heading"><a class="heading-link" href="/testing123/event/triple-cooked-dalston-roof-park-august-special/">Triple Cooked: Dalston Roof Park – August Special</a><br></h3>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p></p>
        </div>
        <div class="card__cta">
          <a class="card__button" href="#">Read More<span class="button__arrow"></span></a>
        </div>
        <p></p>
      </div>
      <p></p>
    </div>
    <p></p>
  </div>
  <div class="card events-grid__card">
    <div class="card__wrapper">
      <div class="card__media-wrapper"><img alt="Triple Cooked: Dalston Roof Park – August Special" class="card__media card__media--image" src="http://sheffield.theviperrooms.com/wp-content/uploads/2016/09/saturdays-box.png"></div>
      <div class="card__content-wrapper">
        <div class="card__header">
          <h3 class="card__heading heading"><a class="heading-link" href="/testing123/event/triple-cooked-dalston-roof-park-august-special/">Triple Cooked: Dalston Roof Park – August Special</a><br></h3>
          <p>A weekly playground for those looking for a more discerning night out. With 2-4-1 drinks all night!</p>
          <p></p>
        </div>
        <div class="card__cta">
          <a class="card__button" href="#">Read More<span class="button__arrow"></span></a>
        </div>
        <p></p>
      </div>
      <p></p>
    </div>
    <p></p>
  </div>
  <p></p>
</div>

Upvotes: 2

Related Questions