Flexbox在列中拉伸textarea

Question

我试图让这个textarea在2列布局中伸展以填充空白空间.因此右列是可变高度,我希望左列中的textarea拉伸以填充空白区域.我尝试使用align-items:在父级上拉伸以及在textarea上将高度设置为100%,我似乎无法让它增长以填充空间.

这是HTML

<div class="row">
    <div class="left">
        <h1>Stuff</h1>
        <textarea></textarea>
    </div>
    <div class="right">
        <h1>Preview</h1>
        <div class="content"></div>
    </div>
</div>

这是风格

.row{
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
}

.row > div{
  flex: 0 0 50%;
  max-width: 50%;
}

textarea{
  height: 100%;
}

.content{
  height: 500px;
  background-color: green;
}

这是一个傻瓜

我理解需要供应商前缀和所有这些,所以你不需要进入它.这只是我的代码的简化版本,用于演示我遇到的问题.

Answer 1

制作.left一个flexbox,只允许textarea增长:

.left {
  display: flex;
  flex-direction: column;
}

.left > textarea {
  flex: 1;
}

Plunker