css - 如何使 CSS 布局具有受孩子最大高度限制的流动行高?
问题描述
布局:
有一个容器可以填充 100% 的窗口高度。里面有两个.parent
盒子(红色填充),其中包含.child
元素(黄色填充)。子元素有min-height
和max-height
设置。
html,
body {
height: 100%;
margin: 0;
}
.container {
display: grid;
height: 100%;
gap: 20px;
}
.parent {
background: #f00;
}
.nested {
display: flex;
flex-direction: column;
height: 100%;
}
.child {
height: 100%;
min-height: 100px;
max-height: 150px;
background: #ff0;
}
.another-child {
flex: none;
height: 50px;
background: #0f0;
}
<div class="container">
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="nested">
<div class="another-child"></div>
<div class="child"></div>
</div>
</div>
</div>
目标:
如果内部有空间,则使.parent
框仅垂直增长直到子元素,如果没有,则缩小至子元素。父块红色背景不应可见。max-height
.container
min-height
解决方案
推荐阅读
- python - 在 Windows 上使用 Flask-SQLAlchemy create_all() 获取 AttributeError
- amazon-dynamodb - 调用资源“MyPhone223546421”时 Cloudformation 挂起
- ios - Swift MKMapItem 对象访问其私有成员
- ionic-framework - 将服务器中的 ionic 应用程序迁移为网站
- vue.js - 在观察者中出现 Vuex 错误,但我没有使用 Vuex [Nuxt]
- android - 点击listview,android studio
- python - '不正确的输入:N=2 不得超过 M=1' 尝试拟合线条时出现错误
- web-scraping - Google 搜索引擎限制为 400 个网站
- testing - Hyperledger Fabric - 如何查询网络工件、策略、链码等
- python - 您如何找到并单击此按钮?使用 python 和 selenium 实现网络自动化