How to fix crooked display when switching bootstrap tabs?

Question

css

There is a block of contacts (made by bootstrap tabs), in these tabs I use the SLICK carousel.
When the site loads, everything is displayed as it should, but when switching between tabs occurs (the content is displayed incorrectly - (it seems that the block sizes are not set), but as soon as we press the carousel scroll button, everything becomes as it should be.
Link to the demo

Answer 1

.tab-content > .tab-pane,
.pill-content > .pill-pane {
    display: block;    /* undo display:none          */
    height: 0;         /* height:0 is also invisible */
    overflow: hidden;  /* no-overflow                */
}
.tab-content > .active,
.pill-content > .active {
    height: auto;      /* let the content decide it  */
}