这是一个很常见的布局需求。可以这样实现:1. 外层盒子设置固定宽高,overflow: hidden

css

.outer {width: 500px;height: 300px;overflow: hidden;  
}

2. 上层盒子获取动态高度

css

.upper {height: ?px;  /* 动态高度 */
}

3. 下层盒子设置填满剩余空间

css

.lower {flex-grow: 1;
}

4. 使用 Flexbox 布局,并设置 align-items: stretch

css

.outer {display: flex;align-items: stretch;  
}

5. HTML 结构

html

<div class="outer"><div class="upper">...</div><div class="lower">...</div>  
</div> 

stretch 选项会使 flex 容器的 cross axis 上所有项目的尺寸填满容器,而 flex-grow: 1 会使 .lower 项目占据剩余空间。所以,无论 .upper 的高度如何变化,.lower 项目的高度都会填满剩余空间

一个简单 demo:

html

<div class="outer"><div class="upper"><select v-model="height"> <option value="100">100px</option><option value="200">200px</option>  <option value="300">300px</option></select></div><div class="lower">Flex item</div>
</div>

js

data() {return {height: '100'} 
}

css

.outer {width: 500px;height: 300px;display: flex;align-items: stretch;overflow: hidden;  
}.upper {height: var(--height);  
}.lower {flex-grow: 1;background: #ddd;
} 

这个 demo 选项不同,.upper 的高度会变化,但 .lower 项目的高度总是填满剩余空间。