Slick vertical wrong height 2

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css">
<div id="header"></div>

<div id="main">
	<div class="slider">
		<div><h3>1</h3></div>
		<div><h3>2</h3></div>
		<div><h3>3</h3></div>
		<div><h3>4</h3></div>
		<div><h3>5</h3></div>
	</div>
</div>

SCSS

/* Layout :
	- <body> : flexbox container
	- Header : fixed height
	- Main container : fill empty space below header (flex-grow:1)
*/
body { margin:0; padding:0;  display:flex; flex-direction: column; min-height: 100vh; }
#header { height:150px; background:red; }
#main { flex-grow:1; position:relative; }

/* Slide */
.slick-vertical { position:absolute; top:0; left:0; bottom:0; right:0; }
.slick-slide {
	height:100% !important; // notice how .slick-list height increase when moving slides or resizing window
	
	h3 { height:100%; margin:0; padding: 2%; position: relative; text-align: center; background-color:yellow }
}
.slick-prev, .slick-next { position:absolute; z-index:999; top:50%; }
.slick-prev { left:0; }
.slick-next { right:0; }

// Fix it with the two following lines
.slick-list, .slick-track, .slick-slide {  height:100% !important; }
.slick-slide > div { height:100%; }

JavaScript

$('.slider').slick({
	vertical: true,
	verticalSwiping: true,
	infinite:true
});