How to wrap the output of checkboxGroupInput?

Question

How to modify the following code so that the options of 'checkboxGroupInput' wrap within 'width: 200px'?

library(shiny)

ui <- fluidPage(
  tags$style("
      .custom-wrap {
        display: flex;
        flex-flow: wrap;
        flex-direction: column;
        width: 200px;
      }
      "
  ),
  div(class = "custom-wrap",checkboxGroupInput("variable", "Variables to show:",
                                    c("Cylinders" = "cyl",
                                      "Transmission" = "am",
                                      "Gears" = "gear")))
)

server <- function(input, output, session) {

}

shinyApp(ui, server)

Answer 1

If you want to select all children of the checkboxGroupInput use this selector #variable * :

library(shiny)

ui <- fluidPage(
  tags$style("
      #variable * {
        display: flex;
        flex-flow: wrap;
        flex-direction: column;
        width: 200px;
      }
      "
  ),
  checkboxGroupInput("variable", "Variables to show:",
                     c("Cylinders" = "cyl",
                       "Transmission" = "am",
                       "Gears" = "gear")))

server <- function(input, output, session) {

}

shinyApp(ui, server)