如何实现网页两栏布局？

【概念释义】

两栏布局是网页布局中最基础、最常用的布局模式之一，指页面被划分为左右两个区域，通常左侧为固定宽度的侧边栏（导航、菜单等），右侧为自适应宽度的主内容区。其核心目标是：在保证左侧固定尺寸的前提下，让右侧内容区自动填满剩余空间，实现不同屏幕尺寸下的良好适配。

通俗理解：就像一本书的目录（固定宽度）和正文（自动撑满剩余页面），无论窗口怎么缩放，目录宽度不变，正文自动填满剩余区域。

【基础使用】

实现两栏布局有多种经典方法，以下列出最常用的三种，均以左侧固定宽度、右侧自适应为例。

方法一：Flex 布局（现代推荐）

.container {
  display: flex;
}

.