collapsed-box and data-flickity

I'm trying to create a minimized tab that when opened, creates a photo gallery with Flickity. The problem is that when I click to open, the gallery only shows one image, the others only appear if I resize the screen below is my code

<div class="row table-responsive sizeTab">
    <div class="col-md-12">
        <div class="box collapsed-box">
            <div class="box-header with-border formatTitle" type="button" data-widget="collapse">
                <h3 class="box-title">Testing <small>test</small></h3>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" data-widget="collapse">
                        <i class="fa fa-plus"></i>
                    </button>
                </div>
            </div>
            <div class="box-body">
                <div class="row table-responsive js-flickity" data-flickity='{ "freeScroll": true, "contain": true, "prevNextButtons": false, "pageDots": false }'>
                    @if (ViewBag.Test != null)
                    {
                        foreach (var item in ViewBag.Test)
                        {
                            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12 gallery-cell sizePictures">
                                <a href="#">
                                    <img class="center-block img-responsive" src="https://aetleds.com.br/wp-content/uploads/2017/01/koala-windows-7-vista-and-xp-picks-27753235-1024-768-933x700-1.jpg" />
                                </a>
                                <br />
                            </div>
                        }
                    }
                </div>
            </div>
        </div>
    </div>
</div>

After clicking on the tab, the gallery comes like this

and it should come like this

can anybody help me?