Slider/Flexbox/Firefox Issue

Demonstrates issues with Slider and flexbox in Firebox Slider does not resize correctly inside flexbox row item.

by Greg Borreson

HTML

<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" href="http://kenwheeler.github.io/slick/slick/slick-theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div id="main" class="carousel">
    <div class="carousel__item">1</div>
    <div class="carousel__item">2</div>
    <div class="carousel__item">3</div>
    <div class="carousel__item">4</div>
    <div class="carousel__item">5</div>
    <div class="carousel__item">6</div>
    <div class="carousel__item">7</div>
</div>
 Slider dimensions: <span id="dimensions">&nbsp;?</span>
            <div class="widget_panel_wrapper">
            <header class="widget_panel_top">
                Top<br/>
                <div id="nestedSlider" class="carousel">
                    <div class="carousel__item">1</div>
                    <div class="carousel__item">2</div>
                    <div class="carousel__item">3</div>
                    <div class="carousel__item">4</div>
                    <div class="carousel__item">5</div>
                    <div class="carousel__item">6</div>
                    <div class="carousel__item">7</div>
                </div>                
            </header>

            <article class="widget_panel_main">
            Main
            </article>
            
            <aside class="aside widget_panel_left">
            Left
            </aside>

            <aside class="aside widget_panel_right">
            Right
            </aside>

            <footer class="widget_panel_bottom">
                Bottom
            </footer>            
            </div><!-- wrapper -->

CSS

.carousel__item {
    background: red;
    height: 5em;
    margin: 0 1em;
    font-size: 2em;
    color: white;
    padding: 5px;
}

.carousel {
    margin: 3em;
}

.slick-prev::before,
.slick-next::before {
    color: black;
}

/* flex box styling */
.widget_panel_wrapper {
  /* display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; */
  
  /* -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap; */
  
  font-weight: bold;
  text-align: center;
}

.widget_panel_wrapper > * {
  padding: 10px;
 /*  -webkit-box-flex: 1;
  -webkit-flex: 1 100%;
      -ms-flex: 1 100%;
          flex: 1 100%; */
}

.widget_panel_top {
  background: purple;
}

.widget_panel_bottom {
  background: lightgreen;
}

.widget_panel_main {
  text-align: left;
  background: deepskyblue;
}

.widget_panel_left {
  background: gold;
}

.widget_panel_right {
  background: hotpink;
}

@media all and (min-width: 500px) {
  .widget_panel_left { -webkit-box-flex: 1; -webkit-flex: 1 auto; -ms-flex: 1 auto; flex: 1 auto; }
  .widget_panel_right { -webkit-box-flex: 1; -webkit-flex: 1 auto; -ms-flex: 1 auto; flex: 1 auto; }
}
@media all and (min-width: 650px) {
  .widget_panel_main    { -webkit-box-flex: 1; -webkit-flex: 1 auto; -ms-flex: 1 auto; flex: 1 auto; }
  .widget_panel_left { -webkit-box-flex:1; -webkit-flex:1; -ms-flex:1; flex:1; -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } 
  .widget_panel_main    { -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; }
  .widget_panel_right { -webkit-box-flex:1; -webkit-flex:1; -ms-flex:1; flex:1; -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; }
  .widget_panel_bottom  { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; }
}
@media all and (min-width: 900px) {
  .widget_panel_main    { -webkit-box-flex: 3; -webkit-flex: 3 0px; -ms-flex: 3 0px; flex: 3 0px; }
  .widget_panel_left {...

JavaScript

$(document).ready(function () {
    $('#main').slick({
        dots: true,
        slidesToShow: 1,
        vertical: true
    });

    $('#nestedSlider').slick({
        dots: true,
        slidesToShow: 1,
        vertical: true
    });
    displaySize();
});

window.onresize = displaySize;
function displaySize() {
    // your size calculation code here
    var myWidth = $("#nestedSlider").width();
    var myHeight = $("#nestedSlider").height();
    document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
};