可调整内容大小可从底部/顶部编辑

Question

有一个简单的可编辑标题和段落，它们有高度限制。标题输入文本字段必须底部对齐，这意味着它在输入文本时应该从底部到顶部调整大小。同时，段落文本字段从上到下调整大小。我不知道如何从底部/顶部调整大小。这是html代码：

<h1 contenteditable="true" style="max-height:70px;overflow:hidden;">
This is a headline</h1>
<p contenteditable="true" style="max-height:70px;overflow:hidden;">
This is a paragraph.</p>

Answer 1

类似的东西？使用Flexbox:相当容易

.container {
border: #008000 solid 2px;
display: flex;
width: 500px;
height: 100px;
}
.container h1,
.container p {
flex-basis: 50%;
overflow: hidden;
max-height: 70%;
margin: 0;
font-size: 16px;
}
.container h1 {
border: #f00 solid 2px;
align-self: flex-start;
}
.container p {
border: #00f solid 2px;
align-self: flex-end;
}

<div class="container">
<h1 contenteditable="true">Type more stuff in here</h1>
<p contenteditable="true">Type more stuff in here</p>
</div>