Facing item width issue while arranging multiple items in a div - css

Question

I have to display some item card. Each card has min-width property. When my screen size change, card size also changed. Because of that, I am facing a problem. That is, the last item/items takes whole area. Is it possible to keep a minimum width for each card, though it is last item or not? Please help.
Problem:
Attempt:
Please find in codesandbox: https://codesandbox.io/s/multiple-items-arrange-926fx

Answer 1

It sounds like you also want to specify a max-width for your cards.
In your example it could simply be:
const Container = styled.div`
flex: 1;
margin: 5px;
max-width: 300px;
min-width: 280px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
background-color: #f5fbfd;
position: relative;
&:hover ${Info} {
opacity: 1;
}
`;
You can of course also leave max-width: 280px if you don't wish to change the width of the elements at all.
Additionally you can add justify-content: flex-start to the container to make it look less weird on resizes. In your example:
const Container = styled.div`
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
`;