I'm facing an issue with setting up a flex layout where the left section contains content and the right section contains a slider. However, despite applying flex to the main container, the slider is not being displayed.
Can anyone help me fix this problem?
App.js
import "./styles.css";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
export default function App() {
return (
<div className={"container"}>
<div className={"user"}>Hello</div>
<div className={"sliderSection"}>
<Slider dots slidesToShow={3} key={item.id}>>
{[1, 2, 3, 4].map((d) => (
<div>{d}</div>
))}
</Slider>
</div>
</div>
);
}
style.css
.container {
width: calc(100% - 194px);
margin: 0 auto 20px auto;
display: flex;
border: solid 1px;
}
.user {
width: 140px;
height: 180px;
background-color: red;
}
.sliderSection {
margin-left: 30px;
}