R shinydashboard: specifying div style width argument as percentage to fit a resizeable JS plot

Task: using R and shinydashboard, embed a custom Javascript-generated plot in the dashboard body. Specify width of the plot as percentage, so that the plot occupies its column (or box) regardless of viewer's screen setup.

Setup: R (3.5.2), shiny (1.2.0) and shinydashboard (0.7.1). The dashboard code (simplified reproducible example) is as follows:

library(shiny)
library(shinydashboard)

ui <- fluidPage(

dashboardPage(
    dashboardHeader(),
    dashboardSidebar(
        sidebarMenu(
            menuItem("Main", tabName = "tab1", icon = icon("dashboard")
            )
        )
    ),
    dashboardBody(
        tabItems(
            tabItem("tab1",
                    column(width = 12, 
                           tags$div(id = "main", style = "width: 100%; height: 400px"),
                           tags$script(src = "http://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"),
                           tags$script(src = "myscript.js")
                    )
            )
        )
    )
 )
)


server <- function(input, output) {

}

# Run the application 
shinyApp(ui = ui, server = server)

The respective Javascript file myscript.js, which is to be placed in the www subfolder relative to the app file itself, is as follows:

// JS Plot with Echarts 4

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

Problem: for some reason, the 100% specification gets converted to 100px in the final result, producing this output:

Inspecting the plot I see that div#main has indeed the width of 100%, but then it contains another, smaller div, which is already 100px wide:

To me, it would seem that either tabItem or tabItems are at fault, because without using them the outcome is correct, and that smaller intermediary div takes its width from its parent correctly:

For completeness, the code for the working version (without tabItem(s)) is this:

library(shiny)
library(shinydashboard)

ui <- fluidPage(

    dashboardPage(
        dashboardHeader(),
        dashboardSidebar(),
        dashboardBody(
            column(width = 12, 
                   tags$div(id = "main", style = "width: 100%; height: 400px"),
                   tags$script(src = "http://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"),
                   tags$script(src = "myscript.js")
            )
        )
    )
)

server <- function(input, output) {

}

# Run the application 
shinyApp(ui = ui, server = server)

As you can see, the code is almost identical, aside from the offending functions. I don't see however how a shinydashboard could possibly work without these functions, as they structure the whole application. Is there any workaround you can think of? Thanks.

from R shinydashboard: specifying div style width argument as percentage to fit a resizeable JS plot