Vertically align element with 1/3 space above 2/3 space below

I have a "hero image" filling the height and width of the viewport. Inside this div there is a heading. I would like the heading to be vertically aligned so that any available space is one-third above and two-thirds below.

For example: Hero image = 1000px high. H1 = 400 px high. So space above would = 200px Space below = 400px

It is a responsive layout so I don't know the height of the hero image or the heading.

Vertically centring using Flexbox is easy, but I need more space below. Can anyone suggest me in the right directions?

Here's my code so far. Please note I've not used Flex before so I don't really know what I'm doing.

.hero_image {
    min-height:100vh;
    background-color:yellow;
    display: flex;
    align-items: center;
    justify-content: center;
    }

.hero_image h1 {
    font-size:72px;
    padding-top:20px;
    }

<div class="hero_image">
    <h1>Heading <br>more text <br>last bit of text</h1>
</div>

Here's a link to the JSFiddle example https://jsfiddle.net/yvf6tgh8/2/

Solution

Make your hero_image a column flexbox with psuedo elements:

give flex: 1 to before, and
flex: 2 to after to get the effect.

See demo below:

.hero_image {
  min-height: 100vh;
  background-color: yellow;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;  /* ADDED */
}

.hero_image h1 {
  font-size: 72px;
  padding-top: 20px;
  background: #fff; /* For Illustration */
}

body {
  margin: 0;
}

.hero_image:after { /* ADDED */
  flex: 2;
  content: '';
}
.hero_image:before { /* ADDED */
  flex: 1;
  content: '';
}

<div class="hero_image">
  <h1>Heading <br>more text <br>last bit of text</h1>
</div>