如何使用 CSS 使 div 填充剩余的水平空间？

在 Web 开发中，我们经常需要通过 CSS 来控制页面元素的大小和位置。有时候我们会遇到这样的情况：我们想让一个 div 元素填满剩余的水平空间，但是我们不知道该如何实现。

本篇文章将介绍如何使用 CSS 使 div 填充剩余的水平空间，并且会涉及到以下几个概念：

• box-sizing
• display:flex
• flex-grow

box-sizing

在了解怎么使用 CSS 来填充剩余的水平空间之前，我们需要先介绍一个概念：box-sizing。box-sizing 是用来控制元素如何计算它的尺寸的。它有两个属性值：content-box 和 border-box。

• content-box：默认值，元素尺寸只包含内容，不包含边框和内边距。
• border-box：元素尺寸包含内容、内边距和边框。

我们使用 border-box 作为 box-sizing 属性值，能够更好地控制元素的尺寸。

display:flex

我们可以使用 display:flex 属性来将元素设置为 flex 容器。在 flex 容器中，我们可以通过定义 flex-grow 属性来让元素占用剩余的空间。

flex-grow

flex-grow 属性用于指定一个子元素在 flex 容器中相对于其他子元素所占据的空间大小。它的值是一个正整数，表示相对于其他元素所占据的比例。例如，如果有三个子元素，两个元素的 flex-grow 值为 1，另一个元素的 flex-grow 值为 3，则第三个元素将占据剩余空间的三分之一。

下面是一个使用 CSS 让 div 填充剩余的水平空间的例子：

.container {
  display: flex;
}

.container > div {
  border: 1px solid black;
  box-sizing: border-box;
}

.container > div:last-child {
  flex-grow: 1;
}

在上面的例子中，我们首先把容器设置为 flex 容器。然后，我们给每个子元素设置边框和 box-sizing 属性。最后，我们通过给最后一个子元素设置 flex-grow 属性来让它占据剩余空间。

以上的代码片段应该以markdown标明：

.container { display: flex; }

.container > div { border: 1px solid black; box-sizing: border-box; }

.container > div:last-child { flex-grow: 1; }