Html 当屏幕变宽时，如何将中间的div设置为600px的宽度，同时使左右侧边栏扩展？

我已经做了几次尝试，主要是尝试

width

属性。没有成功

我的目标是重新创建Twitter的桌面视图。推特的工作方式是，有一个中央div和一个无限长的卷轴。左侧和右侧是两个侧栏，完全扩展到1285px之外。我已经处理好了

我没有一种方法来模拟这种行为：当屏幕扩展到128px以上时，边栏和主提要保持相同的宽度，而边栏的左侧和右侧则显示空白

顺便说一下，边栏的内容将保持固定宽度。只有包含内容的div才会增长！所以我将把东西放在“container”div中，并在外部div扩展时固定容器的大小

我向你们展示了我的html/css的简化版本，我相信它会起到作用。如果我在真实的边栏中复制，它将覆盖好几页

#侧边栏{
左边距：20px；
浮动：左；
宽度：30%；
边框：2倍纯红；
}
#右侧边栏{
浮动：对；
宽度：30%；
边框：2倍纯红；
}
#搜寻{
边缘顶部：50px；
边缘底部：50px；
高度：100vh；
边框：3个实心卡德蓝；
}
#搜索引擎{
高度：100vh；
宽度：自动；
溢出x：隐藏；
溢出y：自动；
}
.居中{
文本对齐：居中；
宽度：自动；
边框：3倍纯绿；
}

部分{
显示器：flex；
}
旁白{
弹性：1；
背景：橙色；
}
文章{
宽度：600px；
背景：浅蓝色；
}

左边
600像素
正确的

部分{
显示器：flex；
}
旁白{
弹性：1；
背景：橙色；
}
文章{
宽度：600px；
背景：浅蓝色；
}

左边
600像素
正确的