Problema ao centralizar verticalmente com o flexbox quando as alturas são desconhecidas

Meu layout tem um contêinerflex-container e uma criança

HTML:

<div class="flex-container">
  <div>text</div>
</div>

O contêiner e a criança têm umaltura desconhecida. E o objetivo é:

Se a criança tiver uma altura mais baixa que o contêiner, ela aparecerá centrada na horizontal e na vertical.Se a criança tem uma altura maior que o contêiner, ela se ajusta ao topo e ao fundo e podemos fazer rolagem.

Esquema:

A maneira mais rápida de centralizar um elemento com o flexbox é a seguinte:

.flex-container
{
  display: flex;
  align-items: center; /* vertical */
  justify-content: center; /* horizontal */

  width: 100%;
  height: 300px; /* for example purposes */
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  background: #E77E23;
  width: 400px;
}
<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Codepen:http://www.codepen.io/ces/pen/slicw

Mas, se o filho do contêiner tiver uma altura maior, o filho não será mostrado corretamente. A criança aparece cortada (apenas a parte superior).

html,body
{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.flex-container
{
  display: flex;
  align-items: center; // vertical
  justify-content: center; // horizontal
  
  width: 100%;
  height: 100px;
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  background: #E77E23;
  width: 400px;
}
<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Codepen:http://www.codepen.io/ces/pen/sGtfK

Esquema:

Existe uma maneira de resolver esse problema?

questionAnswers(2)

yourAnswerToTheQuestion