Shiny应用横向滚动失效问题求助：仅无纵向滚动时生效

问题核心是当纵向滚动条出现时，页面布局挤压了图表容器的宽度，导致图表自动横向适配、横向滚动条消失。可以通过以下调整解决：

关键修改点 #

• 给包裹图表的div设置最小宽度自适应内容，明确滚动条属性
• 避免容器被flex布局自动压缩，确保图表能保持设定的宽度

修改后的完整代码 #

## app.R ##
library(shiny)
library(shinydashboard)
library(bslib)
library(shinyWidgets)
library(tidyverse)

ui <- page_navbar(
  title = "My Chart",
  id = "my_chart",
  sidebar = 
    sidebar(
      width = 300,
      fluidRow(
        noUiSliderInput(
          inputId = "horizontal_zoom",
          label = "Horizonal zoom:",
          range =
            list(
              "min" = list(0.25),
              "50%" = list(1),
              "max" = list(4)
            ),
          min = 0.25,
          max = 4,
          value = 1,
          width = "200px",
          height = "18px",
          inline = TRUE
        ),
        
        
        noUiSliderInput(
          inputId = "vertical_zoom",
          label = "Vertical zoom:",
          range =
            list(
              "min" = list(0.25),
              "50%" = list(1),
              "max" = list(4)
            ),
          min = 0.25,
          max = 4,
          orientation = "vertical",
          value = 1,
          width = "10px",
          height = "200px",
          direction = "rtl",
          inline = TRUE
        )
      )
    ),
  nav_panel(
    title = "Here's another tab"
  ),
  nav_panel(
    title = "Here's the chart:",
    # 给nav_panel内容添加容器，避免flex布局挤压
    div(style = "width: 100%;",
        uiOutput(outputId = "trace_plot")
    )
  )
)



server <- function(input, output) { 
  #Plot for Trace Explorer
  observe(
    {
      output$trace_plot <- 
        renderUI(
          div(
            # 关键样式：最小宽度适配内容，同时设置双向滚动条
            style = 'overflow-x: auto; overflow-y: auto; min-width: fit-content; width: 100%;',
            renderPlot(
              iris %>% 
                ggplot(aes(x = Sepal.Length, 
                           y = Sepal.Width)) +
                geom_point(),
              width = 1000 * 
                input$horizontal_zoom,
              height = 700 *
                input$vertical_zoom,
              res = 144
            )
          )
        )
    }
    
  )
  
}
shinyApp(ui, server)

调整说明 #

1. 给nav_panel内的内容添加div(style = "width: 100%;")，确保内容容器占满父容器宽度，避免被flex布局压缩
2. 包裹图表的div修改了样式：
   • min-width: fit-content保证容器至少能容纳图表的实际宽度，不会因页面出现纵向滚动条而被挤压缩小
   • overflow-x/y: auto让滚动条仅在内容超出时显示，比overflow: scroll更贴合需求
3. 调整后无论纵向滚动条是否出现，图表都能保持设定宽度，横向滚动条会正常显示

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