0

I have a grid built using flexbox to not only improve the flexibility (wordplay!) but to also more easily make the element heights the same within the grid. I'm running into issues with controlling the vertical alignment of content within the boxes.

Each parent container has two nested containers: one for the date and another for the rest of the content. The content in the second container includes a link that should align at the bottom of the parent container. See the first image for an example of what it should look like.

01 - Correct vertical alignment - full height.

The issue comes up when the content (city, company in the example) does not fill the full height of the container — it ends up adding the extra space to the content. When the button does not align with the bottom of the container, the space is at the bottom. (Image 2) When I have gotten the button to align with the bottom (using margin-top:auto), the space then appears between the city and the date. (Image 3)

02 - Extra space at the bottom of the container.

03 - Extra space at the top of the container.

Apologies up front if this has been addressed elsewhere. I have worked through these answers to get to this current iteration:

Thank you in advance for any direction or assistance with what I have missed!

/*---- FLEXBOX STYLING ----*/

#events-list {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: auto;
  flex-flow: row wrap;
  align-content: flex-end;
}

#events-list .event {
  flex: 0 0 32%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  background-color: #e6e6e6;
  margin: 0 2% 1rem 0;
  border: solid 2px #666;
}

#events-list .event:nth-child(3n) {
  margin-right: 0;
}

#events-list .event .event-date {
  align-self: flex-start;
}

#events-list .event .event-details {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#events-list .event .event-details .register {
  margin-top: auto;
}


/* ---- GENERIC VISUAL STYLING ----*/

#events-list .event {
  background-color: #e6e6e6;
  margin: 0 auto 1rem;
  border: solid 2px #666;
}

#events-list .event .event-date {
  width: 100%;
  text-align: center;
  background-color: #aaa;
  margin-bottom: 1rem;
}

#events-list .event .event-date p {
  display: inline-block;
  font: normal 2rem/1 "agenda-bold", Arial;
}

#events-list .event .event-date p:first-of-type {
  margin-right: 0.25rem;
}

#events-list .event .event-details .event-city {
  font: normal 1rem/1.5 "agenda-bold", Arial;
  padding: 0 1rem;
}

#events-list .event .event-details .event-time {
  padding: 0 1rem;
}

#events-list .event .event-details .event-bus {
  margin-bottom: 1rem;
  padding: 0 1rem;
}

#events-list .event .event-details .register {
  display: block;
  background-color: #666;
  text-align: center;
  line-height: 2.5rem;
  text-transform: uppercase;
  color: #fff;
}
<section id="events-list">
  <div class="event">
    <div class="event-date">
      <p>MAR 30</p>
    </div>
    <div class="event-details">
      <p class="event-city">City, US</p>
      <p class="event-bus">Company HQ - Company Double Line</p>
      <a class="register" href="#">RSVP</a>
    </div>
  </div>
  <div class="event">
    <div class="event-date">
      <p>MAR 30</p>
    </div>
    <div class="event-details">
      <p class="event-city">City, US</p>
      <p class="event-bus">Company HQ</p>
      <a class="register" href="#">RSVP on 4/13</a>
    </div>
  </div>
  <div class="event">
    <div class="event-date">
      <p>MAR 30</p>
    </div>
    <div class="event-details">
      <p class="event-city">City, US</p>
      <p class="event-bus">Company HQ - Company Double Line</p>
      <a class="register" href="#">RSVP</a>
    </div>
  </div>
</section>
Bhuwan
  • 16,525
  • 5
  • 34
  • 57
Phil
  • 5
  • 1

2 Answers2

0

I fixed your issue. Try to replace flex-direction: row wrap; on line 15 with flex-direction: column;.

And after that, you will need to add height: 100%; to .event-details class.

/*---- FLEXBOX STYLING ----*/

#events-list {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: auto;
  flex-flow: row wrap;
  align-content: flex-end;
}

#events-list .event {
  flex: 0 0 32%;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  background-color: #e6e6e6;
  margin: 0 2% 1rem 0;
  border: solid 2px #666;
}

#events-list .event:nth-child(3n) {
  margin-right: 0;
}

#events-list .event .event-date {
  align-self: flex-start;
}

#events-list .event .event-details {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

#events-list .event .event-details .register {
  margin-top: auto;
}


/* ---- GENERIC VISUAL STYLING ----*/

#events-list .event {
  background-color: #e6e6e6;
  margin: 0 auto 1rem;
  border: solid 2px #666;
}

#events-list .event .event-date {
  width: 100%;
  text-align: center;
  background-color: #aaa;
  margin-bottom: 1rem;
}

#events-list .event .event-date p {
  display: inline-block;
  font: normal 2rem/1 "agenda-bold", Arial;
}

#events-list .event .event-date p:first-of-type {
  margin-right: 0.25rem;
}

#events-list .event .event-details .event-city {
  font: normal 1rem/1.5 "agenda-bold", Arial;
  padding: 0 1rem;
}

#events-list .event .event-details .event-time {
  padding: 0 1rem;
}

#events-list .event .event-details .event-bus {
  margin-bottom: 1rem;
  padding: 0 1rem;
}

#events-list .event .event-details .register {
  display: block;
  background-color: #666;
  text-align: center;
  line-height: 2.5rem;
  text-transform: uppercase;
  color: #fff;
}
<section id="events-list">
  <div class="event">
    <div class="event-date">
      <p>MAR 30</p>
    </div>
    <div class="event-details">
      <p class="event-city">City, US</p>
      <p class="event-bus">Company HQ - Company Double Line</p>
      <a class="register" href="#">RSVP</a>
    </div>
  </div>
  <div class="event">
    <div class="event-date">
      <p>MAR 30</p>
    </div>
    <div class="event-details">
      <p class="event-city">City, US</p>
      <p class="event-bus">Company HQ</p>
      <a class="register" href="#">RSVP on 4/13</a>
    </div>
  </div>
  <div class="event">
    <div class="event-date">
      <p>MAR 30</p>
    </div>
    <div class="event-details">
      <p class="event-city">City, US</p>
      <p class="event-bus">Company HQ - Company Double Line</p>
      <a class="register" href="#">RSVP</a>
    </div>
  </div>
</section>
m1l4n
  • 19
  • 5
0

First apply flex-direction: column to the #events-list .event instead of flex-direction: row to make the flow of content vertically...

and then apply flex:1 to the .event-details div to allow it take the remaining space in the .event div...

also remove width:100% from the .event-details and align-self: flex-start from the .event-date...no need here.

Note: if you are using flex-direction: column the align-items and justify-content properties of flexbox switch to each other

/*---- FLEXBOX STYLING ----*/

#events-list {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: auto;
  flex-flow: row wrap;
  align-content: flex-end;
}

#events-list .event {
  flex: 0 0 32%;
  display: flex;
  flex-direction: column;
  background-color: #e6e6e6;
  margin: 0 2% 1rem 0;
  border: solid 2px #666;
}

#events-list .event:nth-child(3n) {
  margin-right: 0;
}

#events-list .event .event-details {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#events-list .event .event-details .register {
  margin-top: auto;
}


/* ---- GENERIC VISUAL STYLING ----*/

#events-list .event {
  background-color: #e6e6e6;
  margin: 0 auto 1rem;
  border: solid 2px #666;
}

#events-list .event .event-date {
  width: 100%;
  text-align: center;
  background-color: #aaa;
  margin-bottom: 1rem;
}

#events-list .event .event-date p {
  display: inline-block;
  font: normal 2rem/1 "agenda-bold", Arial;
}

#events-list .event .event-date p:first-of-type {
  margin-right: 0.25rem;
}

#events-list .event .event-details .event-city {
  font: normal 1rem/1.5 "agenda-bold", Arial;
  padding: 0 1rem;
}

#events-list .event .event-details .event-time {
  padding: 0 1rem;
}

#events-list .event .event-details .event-bus {
  margin-bottom: 1rem;
  padding: 0 1rem;
}

#events-list .event .event-details .register {
  display: block;
  background-color: #666;
  text-align: center;
  line-height: 2.5rem;
  text-transform: uppercase;
  color: #fff;
}
<section id="events-list">
  <div class="event">
    <div class="event-date">
      <p>MAR 30</p>
    </div>
    <div class="event-details">
      <p class="event-city">City, US</p>
      <p class="event-bus">Company HQ - Company Double Line</p>
      <a class="register" href="#">RSVP</a>
    </div>
  </div>
  <div class="event">
    <div class="event-date">
      <p>MAR 30</p>
    </div>
    <div class="event-details">
      <p class="event-city">City, US</p>
      <p class="event-bus">Company HQ</p>
      <a class="register" href="#">RSVP on 4/13</a>
    </div>
  </div>
  <div class="event">
    <div class="event-date">
      <p>MAR 30</p>
    </div>
    <div class="event-details">
      <p class="event-city">City, US</p>
      <p class="event-bus">Company HQ - Company Double Line</p>
      <a class="register" href="#">RSVP</a>
    </div>
  </div>
</section>
Bhuwan
  • 16,525
  • 5
  • 34
  • 57
  • Thank you so much, @Bhuwan — that is perfect. I just started working more with flexbox and this makes much more sense now. I appreciate the assistance! – Phil Mar 15 '18 at 13:52