How to get items in a div to show in a row, stretch to fit the entire parent div, stack when screen is shrunk, but keep all items the same size?

Question

I have a div with an odd number of card like divs in it (i.e 3). I want the card divs to be in a row on full screen and stretch to the whole screen. When minimized, I want them to stack. When the cards go to a column, they look completely fine and each card stretches the whole screen. The problem is that when the orientation 2 cards on the first row and 1 on the second, the 3rd card is taking up the entire row instead of keeping the same size as the other cards (ie picture). I want item3 to be the same size as item 2 in this case.

html file

<div class="outside">

<div class="item">item1</div>

<div class="item">item2</div>

<div class="item">item3</div>

</div>

css file

.outside{
    width: 100%;
    border: 2px solid black;
    margin: 0 0 -20px;
  
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;  
}

.item {
  border: 1px solid blue;
  padding: 20px;
  margin: 16px;
  min-width: 260px;
  
  flex:1;
}

I messed with css and tried various things but cant seem to find an easy fix to a problem that seems like there should be one that exists.

Answer 1

You are not using any styles for the "outside" class (or didn't upload them). You can use the flexbox options in this class, such that the items inside the class get styled properly. You can do this something like this:

.body{
    width: 100%;
    border: 2px solid black;
    margin: 0 0 -20px;
}

.outside {
    width: 100%; /* To span the entire width of the body */
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;      
}

.item {
  border: 1px solid blue;
  padding: 20px;
  margin: 16px;
  min-width: 260px;
}