Html CSS：如何设置内容相对于浏览器屏幕的固定宽度

我不熟悉CSS和HTML，我对这一点很迷茫。我想有一个屏幕分为两半，而其中一个宽度等于50%的最大化浏览器屏幕。而另一个将是灵活的。因此，当您将浏览器宽度设置为一半时，其中一个内容将完全可见，而另一个内容将完全隐藏。当然，我希望每个决议都是一样的

和foursquare一样：（地图是隐藏的，在浏览器宽度小于50%之前，条形图信息不受影响）

以下是示例：

正文{
宽度：100vw；
高度：100vh；
}
/*宽度必须为浏览器最大宽度的50%，与foursquare上的条形图相同*/
.左半{
浮动：左；
背景色：黑色；
宽度：50%；
身高：100%；
}
/*宽度在浏览器最大宽度的0-50%之间，与foursquare上的地图相同*/
.右半{
浮动：对；
背景色：红色；
身高：100%；
宽度：50%；
}

---

您可以使用Flexbox执行类似操作：

html，正文{/*已修改*/
宽度：100vw；
高度：100vh；
保证金：0；/*建议*/
}
身体{
display:flex；/*默认情况下以内联方式显示子项*/
}
.左半{
/*浮动：左*/
背景：黑色；
flex:0 0 750px；/*根据您的需要进行调整/在初始宽度为750px时不会增长或收缩*/
/*身高：100%*/
overflow-x:auto；/*可选/如果内容宽度大于750px（在本例中），则启用水平滚动*/
}
.右半{
/*浮动：对*/
背景：红色；
/*身高：100%*/
/*宽度：50%*/
flex:1；/*占用剩余的水平空间*/
}
@媒体屏幕和（最大宽度：1000px）{/*根据需要调整*/
.lefthalf{flex:3}/*在601px和1000px屏幕宽度之间，始终比.righhalf宽三倍*/
.righthalf{flex:1}
}
@媒体屏幕和（最大宽度：600px）{/*根据需要调整*/
身体{
弯曲方向：列；/*建议/垂直堆叠子项*/
}
.左半，
.右半{
弹性体：1；/*可选和推荐/每个都占身体高度的一半*/
}
}

---

非常感谢。垂直堆叠真的很棒，我将在我的项目中使用它。