Wrapping Elements when item is at a certain width - html

Question

I am trying to implement a CSS "card template" that a 2 item flexbox that needs wrap the last item when the first item is at a certain width. To complicate matters the width of the last item can be variable. This makes more sense when you view the JFiddle below. The green box is the first item, and the red box is the last item. The red box needs to wrap to the next line when the user changes the windows size to where the green box reaches a width of 300px. I've tried to use the flex-wrap combined with min-width, but this doesn't do the trick. Any help is appreciated.
https://jsfiddle.net/burtonrhodes/tu4wgc3m/41/
And below is an example of the card template
<div class="afs-card">
<div class="afs-card-checkbox">
<input type="checkbox" />
</div>
<div class="afs-card-icon">
X
</div>
<!-- this div should expand to fill the space -->
<div class="afs-card-info">
<!-- this item should exapnd to fill the space -->
<div class="afs-card-content">
<div class="afs-card-description">
This is the content for the card. When adjusting the screen, if this box is
<=3 00px;, then the red box should wrap to the next line. </div>
<div class="afs-card-sub-description">
This is a sub text for the card
</div>
</div>
<!-- this div will be a certain width based off child width properties
and should go to next line if afs-content's width is <= 300px -->
<div class="afs-card-details">
<!-- no wrapping of these items should occur -->
<div style="width: 80px">
10/15/2005
</div>
<div style="width: 20px">
X
</div>
<div style="width: 70px">
More
</div>
</div>
</div>
<div class="afs-card-menu">
...
</div>
<div class="afs-card-drag-handle">
==
</div>
</div>

Answer 1

You can achieve this using flex-basis and flex-grow. Update your css with this:
// Your wrapper
.afs-card-info {
display: flex;
width: 100%;
border: 1px solid;
flex-wrap: wrap;
}
// Your left container
.afs-card-content {
padding: 1px 10px;
border: green 2px solid;
flex-basis: 300px;
flex-grow: 1;
}

Answer 2

you can do it like this without media queries:
.afs-card-info {
display: flex;
flex-wrap: wrap;
width: 100%;
border: 1px solid;
.afs-card-content {
flex-grow: 1;
min-width: 300px;
flex-basis: calc(100% - 176px);
set the container to wrap
set the content to fill available space
set content minimum width to ensure it will force the wrap eventually
flex-basis sets the elements width prior to any flex space distribution, so setting it to the rows space less the second element width prevents it from always wrapping the second element
fiddle: https://jsfiddle.net/z91j04rh/4/

Answer 3

place this line of code above the css that you want to apply the 300px min-width to
#media only screen and (min-width: 300px) {
#elementid {
--css here--
}
}