To be viewed on mobile screen size.
Each image is in a div that's display flex
Each image is set to a big size.
The flex shrink is set on all images, but theyare not shrinking.
The images are overflowing the flex container.
Expected behavior: All images should shrink so they are all showing on screen without wrapping like in this picture..
https://play.tailwindcss.com/rP79Yfa2IR
<div class="bg-black p-4"><div class="flex"><img class="h-96 w-96 flex-shrink" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" /><img class="h-96 w-96 flex-shrink" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" /><img class="h-96 w-96 flex-shrink" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80" alt="" /><img class="h-96 w-96 flex-shrink" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" /></div></div>