Zurb foundation flex grid issues

Question

I am using zurb foundation v.6 and it's flex grid instead of the normal grid that uses floats. I have made a footer where I have 2 divs that I want each aligned to its own end. This is the code:

<footer id="footer">
  <div class="row align-justify align-middle">
    <div class="column small-6">
      Adresse, org. nr, lenke til kontakt
    </div>
    <div class="column small-6">
      <img src="/img/facebook.svg">
      <img src="/img/twitter.svg">
    </div>
  </div>
</footer>

This is the css for it:

#footer {
  height: 4rem;
  position: relative;
  z-index: 1;
  background-color: $gray;

  .social-links {
    display: flex;
    justify-content: flex-end;
  }
}

The problem I have is that the footer is not taking the height of 4rem, it just takes the height of images. How can I fix that?

Answer 1

Add css

.align-middle {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  align-items:center;
  height:100%;
}

#footer {
  height: 4rem;
  position: relative;
  z-index: 1;
  background-color: #ddd;
}

.social-links {
  display: flex;
  justify-content: flex-end;
}

.align-middle {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  align-items:center;
  height:100%;
}

<footer id="footer">
  <div class="row align-justify align-middle">
    <div class="column small-6">
      Adresse, org. nr, lenke til kontakt
    </div>
    <div class="column small-6">
      <img src="/img/facebook.svg">
      <img src="/img/twitter.svg">
    </div>
  </div>
</footer>