根据父级的最大高度限制元素的高度

Question

我的代码看起来像这样（小提琴：https://jsfiddle.net/pavloschris/2x3h0ne7/）：

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.outer {
  max-height:50%;
  width: 200px;
}

<div class="wrapper">
  <div class="outer">
    <div class="inner">Text in here...</div>
  </div>
</div>

.inner中有文字，.outer会根据.inner身高展开它的高度。

如果.inner身高小于.outer身高（.wrapper的50％），则.outer的身高与.inner相同。

如果.inner身高超过.wrapper的50％，那么.outer身高将是.wrapper的50％，但.inner会继续增长和溢出.outer。

是否可以将.inner身高限制为.outer max-height？

我正在寻找一种仅限CSS的方法！