儿童身高以适应空白空间

Question

如何使story的高度适合所有空白区域，直到父级的底部边框？

.grid{
display:grid;
grid-template-columns:40% auto;
grid-gap:10px;
min-height:100vh;
}

.gridleft{
background:gold;
}

.inptop{
display:block;
width:100%;
background:lightblue;
outline:none; border:none;
}

.story{
background:#ddd;
min-height:120px;
overflow-y:scroll;
}

.gridright{
background:lightgreen;
}

<div class='grid'>
<div class='gridleft'></div>
<div class='gridright'>
<input type='text' class='inptop'>
<div class='story'>STORY</div>
</div>
</div>

Answer 1

Flexbox可以做到

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.grid {
  display: grid;
  grid-template-columns: 40% auto;
  grid-gap: 10px;
  min-height: 100vh;
}

.gridleft {
  background: gold;
}

.inptop {
  display: block;
  width: 100%;
  background: lightblue;
  outline: none;
  border: none;
}

.story {
  background: #ddd;
  overflow-y: scroll;
  flex: 1 0 120px;
}

.gridright {
  background: lightgreen;
  display: flex;
  flex-direction: column;
}

<div class='grid'>
  <div class='gridleft'></div>
  <div class='gridright'>
    <input type='text' class='inptop'>
    <div class='story'>STORY</div>
  </div>
</div>