Резиновый DIV с круглым низом

div { 
    background: #000; 
    width: 200px; 
    height: 300px; 
    border-radius: 0 0 50vh 50vh; 
}

<div></div>

.wrap { 
  display: -webkit-flex; 
  display: -moz-flex; 
  display: -ms-flex; 
  display: -o-flex; 
  display: flex; 
  justify-content: flex-start; 
} 
 
.div { 
  background-color: #000; 
  position: relative; 
  margin: 0 10px; 
} 
 
.div:after { 
  content: ''; 
  background-color: #000; 
  position: absolute; 
  left: 0; 
  top: 100%; 
  transform: translateY(-50%); 
  width: 100%; 
  border-radius: 50%; 
  padding-top: 100%; 
} 
 
.div-1 { 
  width: 50px; 
  height: 50px; 
} 
 
.div-2 { 
  width: 100px; 
  height: 200px; 
} 
 
.div-3 { 
  width: 150px; 
  height: 250px; 
} 
 
.div-4 { 
  width: 250px; 
  height: 350px; 
}

<div class="wrap"> 
  <div class="div div-1"></div> 
  <div class="div div-2"></div> 
  <div class="div div-3"></div> 
  <div class="div div-4"></div> 
</div>