keep 100% width and background stick to bottom of flex div

Question

I have these two divs in a flex container. I need the second div to keep the background image aspect ratio when resized without cropping the image, the background image needs to stay at 100% width throughout the resize while also containing all of the divs contents. Not sure what I need to do for this to work properly. I have included a fiddle.

JSFiddle example

<div class="v0">
<div class="v2">
<h2>lorem ipsum</h2>
<ul class="v-list">
  <li>lorem ipsum dolet</li>
  <li>lorem ipsum dolet</li>
  <li>lorem ipsum dolet</li>
  <li>lorem ipsum dolet</li>
</ul>
</div>
<div class="v2">
<div class="v3" style="background-image:url(http://images.all-free-download.com/images/graphicthumb/winter_sunrise_in_the_mountains_312220.jpg);">
  <div class="v4">
    <h3>Lorem ipsum dolet</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae officia neque, rem placeat. Alias voluptas, tempore vitae ad incidunt. Amet dolor voluptates iure, corrupti esse perferendis dolores dolorem, sunt necessitatibus.
    </p>
    <a class="b1">lorem button</a>
  </div>
</div>
</div>
</div>


.v0 {
 display: flex;
 flex-wrap: nowrap;
 justify-content: space-between;
 padding: 2em;
}

.v-list {
 display: flex;
 flex-wrap: wrap;
}

.v-list li {
 flex-basis: 100%;
 margin-bottom: 1em;
}

.v2 {
 flex-basis: 50%;
 z-index: 1;
}

.v3 {
 background-repeat: no-repeat;
 background-position: center bottom;
 background-size: cover;
 min-height: 515px;
 min-width: 50vw;
}

.v4 {
 padding: 1em;
}

Answer 1

By using an img, positioned after the text, we can solve this easier.

Here I cut off a part of the top blue from the image, gave the background that same blue color, and with that, the text will always be above the mountains

Fiddle demo

Stack snippet

.v0 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding: 2em;
}
.v-list {
  display: flex;
  flex-wrap: wrap;
}
.v-list li {
flex-basis: 100%;
 margin-bottom: 1em;
}
.v2 {
  flex-basis: 50%;
  z-index: 1;
}
.v3 {
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  background-color: #80C2FE;
  width: 50vw;
}
.v4 p, .v4 h3, .v4 a {
  padding: 1em 1em 0;
}
.v4 img {
  width: 100%;
}

  <div class="v0">
    <div class="v2">
    <h2>lorem ipsum</h2>
    <ul class="v-list">
      <li>lorem ipsum dolet</li>
      <li>lorem ipsum dolet</li>
      <li>lorem ipsum dolet</li>
      <li>lorem ipsum dolet</li>
    </ul>
    </div>
    <div class="v2">
    <div class="v3">
    <div class="v4">
      <h3>Lorem ipsum dolet</h3>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae officia neque, rem placeat. Alias voluptas, tempore vitae ad incidunt. Amet dolor voluptates iure, corrupti esse perferendis dolores dolorem, sunt necessitatibus.
      </p>
      <a class="b1">lorem button</a>
      <img src="https://i.sstatic.net/YmWjI.png" alt="">
    </div>
    </div>
    </div>
  </div>