Leaflet & Shiny:I can only render Leaflet inside a div(class="outer")

Question

I have two tabPanel tabs, with one Leaflet map output each. The first one displays perfectly. It features a fullscreen leaflet map.

 tabPanel("Interactive map",
    div(class="outer",    
      tags$head(
        # Include our custom CSS
        includeCSS("styles.css"),
        includeScript("gomap.js")
      ),          
      leafletOutput("map", width="100%", height="100%")  

The second tab, however, can't render the leaflet map. The map area is completely blank. Unlike the first tab, it's not intended to be a fullscreen map. It's intended to be next to a bunch of input controls:

tabPanel("Scores",
           tags$head(
             # Include our custom CSS
             includeCSS("styles.css"),
             includeScript("gomap.js")
           ),           
      leafletOutput("map2"),

The second tab is full of controls that I need to generate the map content. This works fine. If I render this map in a third tab, fullscreen (exactly like in the first tab), the map renders ok. But I need this map in this second tab, next to the input controls.

I attempted setting width and height in all sort of combinations, %, pixels, absolute numbers, vh, etc. Nothing works. I tried putting the leaflet map inside a fluidRow, wellPanel. Didn't work either.

All the input controls I mention are inside fluidRows, columns, stuff like that. They work ok, it's just that the map area, no matter how I set it, is completely blank.

Help is greatly appreciated!