Flexbox - different alignment for two elements

Question

I have the following markup:

.content {
  display: flex;
}

<div class="content">
  <div class="contact">[email protected]</div>

  <div class="branding">
    <h1>Name</h1>
    <img src="http://lorempixel.com/200/200" />
  </div>

</div>

I essentially want the contact div to appear top-right of the window and the branding div to be centered on the remaining space on the page; i.e. I don't want the branding div to overlap the contact div at any point.

How would I achieve this with flexbox?

Update: here is an example of the desired layout:

Answer 1

I essentially want the contact div to appear top-right of the window and the branding div to be centered on the remaining space on the page; i.e. I don't want the branding div to overlap the contact div at any point.

CSS

html, body { height: 100%; } /* enable percentage height for flex container */

.content {
    display: flex;
    flex-direction: column;
    height: 100%; /* give the flex container a height */
}

.contact {
    align-self: flex-end; /* align-right */
}

.branding {
    margin: auto; /* center branding div in container */
}

DEMO

With the code above, the contact div appears top-right of the window, the branding div is centered on the page, and there is no overlap at any time.

Answer 2

Here's one way to do it, though I think it will be better once CSS Grid Layouts gets better support.

The lightgrey background is just to show that the branding div is in fact taking up the rest of the space. As you can see, there's no overlap.

.content {
    display: flex;
    flex-direction: row-reverse;
}

.branding {
    width: 100%;
    background: lightgrey;
    text-align: center;
}

<div class="content">
    <div class="contact">[email protected]</div>
    <div class="branding">
        <h1>Name</h1>
        <img src="http://lorempixel.com/200/200" />
    </div>
</div>

Here's an external JSFiddle, too.