<body>
<div class="bg-warning-subtle vw-100 vh-100 d-flex flex-column">
<div class="w-100 bg-primary">toolbar</div>
<div
id="container"
class="flex-grow-1 bg-secondary-subtle m-3"
style="overflow: hidden"
>
<div id="innerComponent" class="d-flex h-100">
<div
id="scrollable"
class="w-75 h-100 bg-white p-2"
style="overflow-y: auto"
>
<div class="bg-success mb-2" style="height: 500px">a</div>
<div class="bg-success" style="height: 500px">b</div>
</div>
<div
id="unscrollable"
class="w-25 h-100 overflow-hidden bg-info d-flex flex-column align-items-center p-2"
>
<button type="button" class="btn bg-light w-100 mb-2">
Base class 1
</button>
<button
type="button"
class="btn bg-light w-100"
style="margin-top: auto"
>
Base class 2
</button>
</div>
</div>
</div>
</div>
</body>
div 块级元素
在HTML中，块级元素（Block-level elements）默认的宽度是它的容器（通常是父元素）的100%，也就是它会自动占满可用的水平空间。而其默认高度则是由其内容决定的，即其内容有多高，元素就会自动扩展到相应的高度。块级元素不同于内联元素（Inline elements），后者默认情况下不会独占一行，并且其宽度和高度直接受其内容的影响。
body元素的默认宽度通常是视口（viewport）的宽度，这意味着它会扩展或收缩以适应浏览器窗口的宽度。默认情况下，body元素的宽度不是固定的，而是响应式的，它会根据浏览器窗口的大小变化而动态调整。
对于高度，body元素的默认高度是由其包含的内容决定的。如果内容的总高度超出了视口的高度，那么body元素（以及整个文档的高度）将扩展以适应所有内容，可能会引入滚动条。如果内容不足以填满视口的高度，则body的实际高度将等于视口的高度，这是因为现代浏览器通常会使html和body元素至少填满视口高度，避免页面看起来内容不足。但这种行为也可以通过CSS显式地进行改变。
定义文档的视口（Viewport）：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
CSS 弹性布局（Flexbox Layout），是一种先进的布局模型，旨在提供一种更有效的方式来布局、对齐和分配容器中项的空间，即使当这些项的大小是未知或是动态变化的。它主要用于一维布局，无论是水平还是垂直方向，Flexbox 都可以轻松地实现各种布局需求。
主要组件
- Flex 容器 (Flex Container): 使用 display: flex; 或 display: inline-flex; 属性定义的容器，它的直接子元素会成为 Flex 项。
- Flex 项 (Flex Items): Flex 容器直接的子元素，它们被布局成一行（水平地）或一列（垂直地）。
主要属性
- Flex 容器属性:
- display: 定义一个 Flex 容器；值为 flex（块级元素效果）或 inline-flex（行内元素效果）。
- flex-direction: 定义主轴方向；值有 row（默认，水平）、row-reverse、column、column-reverse。
- flex-wrap: 控制是否换行；值有 nowrap（默认，不换行）、wrap（换行）、wrap-reverse。
- flex-flow: 是 flex-direction 和 flex-wrap 的简写形式。
- justify-content: 定义在主轴上的对齐方式。
- align-items: 定义在交叉轴上如何对齐 Flex 项。
- align-content: 定义多根轴线的对齐方式。
- Flex 项属性:
- flex-grow: 定义 Flex 项的扩展比例。
- flex-shrink: 定义当空间不足时，Flex 项的缩小比例。
- flex-basis: 定义在分配多余空间前，Flex 项占据的主轴空间。
- flex: 是 flex-grow、flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。
- align-self: 允许单个 Flex 项有与其它项不同的对齐方式，可覆盖 align-items 属性。
在一个使用Flexbox布局的容器中，如果你希望其中的某个项目（flex项）充满容器的剩余空间，可以通过使用flex-grow属性来实现。flex-grow属性定义了项目的放大比例，默认值为0，即如果存在剩余空间，也不放大。
要让一个项目充满剩余空间，你可以这样设置：
.flex-container {
display: flex;
}
.flex-item {
flex-grow: 1;
}