react-slick with width=0 (img not displaying)

Question

I'm using react-slick and I'm having a hard time trying to figure out what's going on with this weird width=0 behaviour. I came accross this issue on the github repo but I have not achieved to fix it. My images are not displaying. Any ideas I could fix this? thanks! Here's the relevant code:

  render() {

var settings = {
 dots: false,
 infinite: false,
 speed: 2500,
 slidesToShow: 1,
 slidesToScroll: 1,
 autoplay: true,
 autoplaySpeed: 2500,
 useCSS: false
};

---

 <section className="text_container">
      <div className="first_col">
      <Slider {...settings}>
      <img src="xx" />
      <img src="xx" />
       <img src="xx" />
      </Slider>
      </div>
      <div className="second_col">
        <p>
           blablabla
        </p>
      </div>

.section_2 .text_container{
width: 94.1vw;
display: -ms-flexbox;
display: flex;
-ms-flex-align: start;
    align-items: flex-start;
margin-top: 5vw;
margin-bottom: 0;


}

.section_2 .text_container .first_col img{
    height: 25.5vw;
    display: block;
    width: auto;
    position: absolute;
}