display:flexの使い方

にdisplay:flexを指定して、 を25％にして中の画像をそれに合わせて横幅100％にしたいのですが、そうするとの横幅25％が無視されて小さくなりリスト全体がきれいに埋まってしまいます、、

.s1-in2 ul li img{
width: -webkit-fill-available;
}

↑これでやると思っていた形になるのですが、なぜwidth:100％　だとできないのかわかりません、、
どなたか教えて下さい。。

<div class="s1-in2"> <ul> <li> <img src="img/879.jpg"> <p>コメント</p> </li> <li> <img src="img/879.jpg"> <p>コメント</p> </li> <li> <img src="img/879.jpg"> <p>コメント</p> </li> <li> <img src="img/879.jpg"> <p>コメント</p> </li> <li> <img src="img/879.jpg"> <p>コメント</p> </li> <li> <img src="img/879.jpg"> <p>コメント</p> </li> <li> <img src="img/879.jpg"> <p>コメント</p> </li> </ul> </div> .s1-in2 ul{ width: 100%; list-style: none; padding:0 0; display:flex; overflow-x: scroll; } .s1-in2 ul li{ width: 25%; margin-right: 30px; } .s1-in2 ul li img{ width: -webkit-fill-available; }