在网页开发中，分割屏幕为2个div并设置第二个宽度是非常常见的情况，特别是在响应式布局中，更是常见。本文将详细介绍如何使用CSS实现在屏幕中创建两个div，其中一个div的宽度是固定的，而另一个div的宽度则占据屏幕剩余的全部空间。
1. 使用flexbox布局
Flexbox布局是一种响应式的布局模型，它可以将一个容器中的内容平均分配，也可以将一个容器的内容分成多列。在网页开发中，我们可以使用flexbox布局来实现上述的分割屏幕的效果。
2. 分割屏幕
我们将屏幕分为两个部分，一部分是固定宽度的左侧区域，另一部分是占据剩余空间的右侧区域。可以使用CSS将页面分割成这两个区域。
2.1 创建HTML结构
HTML结构很简单，只需要创建一个包含两个div的容器即可。
<div class="container">
<div class="left-panel">左侧区域</div>
<div class="right-panel">右侧区域</div>
</div>
2.2 设置样式
接下来，我们可以为这两个div设置样式。首先，为了让这两个div成为一个弹性容器，我们需要设置相关的flexbox属性。
需要将.container设置为一个flex容器，并设置为水平排列元素，下面的代码可以实现这个功能：
.container {
display: flex;
flex-direction: row;
}
接下来，将.left-panel设置宽度，同时将.right-panel设置成1，表示让它填满屏幕中所有的剩余空间：
.container {
display: flex;
flex-direction: row;
}
.left-panel {
width: 200px;
}
.right-panel {
flex: 1;
}
这与使用百分比布局的效果非常相似，但是使用flexbox布局实现起来更加简单并且通用。
3. 其余空间
在上面的例子中，我们使用了flex-grow属性将右侧的div元素占满了剩余的所有空间。但是，如果我们想要让一个元素只占据剩余的一部分空间，该怎么办呢？
对此，我们可以使用CSS中的calc()函数，这一函数可以根据设定的规则来计算具体的数值。
例如，下面的代码可以将右侧的div元素的宽度设置为屏幕宽度的60%：
.right-panel {
width: calc(100% - 200px);
max-width: 60%;
}
这里使用的calc()函数，它的参数是一个代表计算规则的字符串，其中“-”表示减法运算。由于左侧div元素的宽度是200px，所以我们需要用“100%-200px”这种方式来表示右侧div元素的宽度。
4. 总结
通过以上步骤，我们可以使用CSS将屏幕分割为固定宽度以及占据剩余空间的两个div元素。使用flexbox布局的方法让这一过程更加简单，并且能够适应多种设备，是一种非常实用的布局设计。