if one child than width 100% otherwise 50% using flex sass css - html

Question

I have an article page, so the design is like 2 group article images with 50% width, but when the only one child, then it should apply 100% width.
need help to get 50% when two child comes and 100% when one child come
i used flex on parent
design image:
.blog-body {
padding-top: rem(50);
ul{
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
list-style: none;
li{
position: relative;
width: 50%;
padding: 0 rem(15);
margin-bottom: rem(68);
.img-wrap{
img{
width: 100%;
height: 100%;
}
}
}
}
<section class="blog-group-sec">
<div class="blog-contain">
<div class="blog-wrap">
<div class="blog-body">
<ul class="items">
<li class="item">
<div class="img-wrap">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/" alt="">
</div>
</li>
<li class="item">
<div class="img-wrap">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/" alt="">
</div>
</li>
<li class="item">
<div class="img-wrap">
<img src="https://via.placeholder.com/150
C/O https://placeholder.com/" alt="">
</div>
</li>
</ul>
</div>
</div>
</div>
</section>

Answer 1

you need to add the flex-grow property be on the children
<div class="article parent">
<div class="child"> Child 1 </div>
<div class="child"> Child 2 </div>
</div>
<div class="body">
<div class="body"> 100% </div>
</div>
now this is the CSS code for this
.parent{
display: flex;
}
.child{
flex-grow: 1; // grow at equal ratios to the parent
}
This works for me. i hope it works for you too