如何用CSS实现Shiny中splitLayout单元格宽度联动保持总宽100%？

现有一个使用splitLayout()的Shiny应用，可通过style参数调整两个单元格的宽度，原代码如下：

library(shiny)

ui <- fluidPage(
  titlePanel(HTML("test")),
  splitLayout(
    cellArgs = list(style='white-space: normal; resize: horizontal; min-width: 30vw; overflow: auto; max-width: 70vw;'),
    cellWidths = c("35%", "65%"),
    navbarPage(
      title = "Menu 1",
      p("wide page wide page")
    ),
    navbarPage(
      title = "Menu 2",
      p("wide page wide page")
    )
  )
)


server <- function(input, output){}

shinyApp(ui, server)

需求：调整其中一个单元格宽度时，另一个单元格宽度自动相对减少，保持总宽度始终为100%，避免页面出现横向滚动条。已知有JS实现方案，询问是否可仅用CSS实现（曾了解到CSS Grid的1fr能实现类似效果，但不知道如何整合到splitLayout()中）。

纯CSS实现方案 #

可以直接通过自定义CSS替代splitLayout的默认布局逻辑，用CSS Grid实现自适应的可拆分布局，不需要额外JS。具体修改方式如下：

library(shiny)

ui <- fluidPage(
  titlePanel(HTML("test")),
  # 自定义CSS，覆盖splitLayout的默认布局为Grid
  tags$style(HTML("
    .custom-split-layout {
      display: grid;
      grid-template-columns: 35% 65%; /* 初始宽度比例 */
      gap: 10px; /* 可选：单元格之间的间距 */
      width: 100%;
      overflow: hidden; /* 防止容器溢出页面 */
    }
    .custom-split-layout > div {
      resize: horizontal;
      min-width: 30vw;
      max-width: 70vw;
      overflow: auto;
      white-space: normal;
    }
    /* 移除splitLayout默认的float和固定width样式，让Grid接管布局 */
    .custom-split-layout > div {
      float: none !important;
      width: auto !important;
    }
  ")),
  # 给splitLayout添加自定义类，应用上述CSS
  splitLayout(
    class = "custom-split-layout",
    navbarPage(
      title = "Menu 1",
      p("wide page wide page")
    ),
    navbarPage(
      title = "Menu 2",
      p("wide page wide page")
    )
  )
)

server <- function(input, output){}

shinyApp(ui, server)

关键原理说明 #

• 用display: grid把splitLayout容器改成网格布局，grid-template-columns设置初始宽度比例
• 给每个单元格添加resize: horizontal允许拖拽调整宽度，同时用min-width和max-width限制拖拽范围，防止某一列过宽/过窄
• 移除splitLayout默认的浮动和固定宽度样式，让Grid布局自动处理列宽：拖拽其中一列时，另一列会自动填充剩余空间，总宽度始终保持100%，不会出现横向滚动条
• 容器的overflow: hidden确保不会溢出页面，单元格内的内容用overflow: auto处理自身溢出

这样就完全用CSS实现了需求，不需要依赖JS。

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