纯CSS实现AdminLTE3 main-sidebar自适应宽度并同步对应margin-left值

纯CSS可以实现该动态适配效果，无需额外JS代码，核心思路是调整侧边栏的定位方式，将原有基于固定margin的布局改为Flex弹性布局，让主内容区域自动适配侧边栏的实际宽度，具体实现代码如下：

/* 调整body为flex布局，作为侧边栏和主内容的父容器 */
body:not(.sidebar-mini-md):not(.sidebar-collapse) {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

/* 重写侧边栏样式 */
.main-sidebar {
  /* 把原有fixed定位改为sticky，既保留吸边效果，又不脱离文档流 */
  position: sticky !important;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  /* 宽度由内容撑开，保留最小宽度避免过窄 */
  width: fit-content !important;
  min-width: 250px;
  /* 可选：设置最大宽度，避免侧边栏过宽影响体验 */
  /* max-width: 400px; */
  white-space: nowrap; /* 菜单文本不换行，保证宽度被最长内容撑开 */
}

/* 取消主内容区域的固定margin-left，自动占满剩余宽度 */
body:not(.sidebar-mini-md):not(.sidebar-collapse) .content-wrapper,
body:not(.sidebar-mini-md):not(.sidebar-collapse) .main-footer,
body:not(.sidebar-mini-md):not(.sidebar-collapse) .main-header {
  margin-left: 0 !important;
  flex: 1;
}

注意事项 #

• 该方案完全兼容AdminLTE自带的侧边栏折叠/展开交互，折叠状态下布局会自动适配4.6rem的迷你侧边栏宽度，无需额外修改。
• fit-content属性兼容Chrome、Firefox、Edge等所有主流现代浏览器，若需兼容IE等老旧浏览器，可替换为width: auto，并给侧边栏添加float: left属性配合主内容区域的overflow: hidden实现类似效果。
• 如果你的项目有特殊需求必须保留侧边栏的fixed定位，则纯CSS无法实现动态margin同步，可搭配少量JS代码实现：监听侧边栏宽度变化，将宽度值赋值给CSS变量，再把主内容的margin-left设置为该变量即可。

内容的提问来源于stack exchange，提问作者Trouyt