I am new to HTML CSS.I am practicing to make a website.I am trying to create image slider.On setting display flex the flex-shrinks even if flex-grow is given?
For that I took a div container(class name is content) and inside that i took 3 other div container(class name is inner-content).After setting css properties for those 3 containers and if i set display:flex on outer div container the flex shrinks.I don't want that.I tried flex-basis but it didn't works?
/=======Image before applying display:flex;===/
/=======Image after applying display:flex;===/
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500&display=swap" rel="stylesheet">
<link rel='stylesheet' type='text/css' media='screen' href='main1.css'>
<script src='main.js'></script>
</head>
<body>
<div class="main-page">
<div class="content">
<div class="inner-content">
<div class="cont">
<h3>Redmi Note 8</h3>
<p>48MP AI rear camera with Sony IMX586 camera sensor</p>
<button href="#">BUY NOW</button>
</div>
<div class="image-container">
<img src="1.png"/>
</div>
</div>
<!----2nd-->
<div class="inner-content">
<div class="cont">
<h3>Redmi Note 8</h3>
<p>48MP AI rear camera with Sony IMX586 camera sensor</p>
<button href="#">BUY NOW</button>
</div>
<div class="image-container">
<img src="1.png"/>
</div>
</div>
<!----3rd-->
<div class="inner-content">
<div class="cont">
<h3>Redmi Note 8</h3>
<p>48MP AI rear camera with Sony IMX586 camera sensor</p>
<button href="#">BUY NOW</button>
</div>
<div class="image-container">
<img src="1.png"/>
</div>
</div>
</div>
</div>
</body>
</html>
/*==============================css file=========*/[![enter image description here][1]][1]
.content{
margin-top: 10px;
display:flex;
height:85vh;
background: yellow;
width: 100%;
/* overflow: hidden; */
padding:0px;
}
.inner-content{
padding:75px 50px 0px;
display:flex;
margin: auto;
border: 1px solid black;
}
.cont{
flex:1.5;
padding:90px 0px 0px 50px;
background: chocolate;
}
.cont h3{
font-size:30px;
padding-bottom: 10px;
letter-spacing: 1px;
text-shadow: 1px 0px black;
}
.cont p{
font-size:20px;
padding-bottom: 10px;
}
.cont button{
width:150px;
margin:auto;
height:11%;
margin-top:10px;
font-size:18px;
border:2px solid #072085;
color:#072085;
background: white;
border-radius:20px;
text-align: center;
}
.image-container{
align-items: center;
z-index: 1;
flex:1;
}
.image-container img{
max-width: 300px;
height: auto;
margin:0 auto;
animation:drop 1.5s ease;
z-index: 1;
}