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;
}

Here is a plunkr

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

Answer 1

使.left成为弹性框，只允许textarea增长：

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

.left > textarea {
  flex: 1;
}

Plunker

Flexbox在列中拉伸textarea

1 个答案: