CSS flex wrap but no wrap - html

Question

I'm running into an issue with flex-wrap. Where I need flex-wrap: wrap to take care that images wrap and don't run out of the container. I don't need wrap for a link. See my issue below, also my code is included in the post.
JSFiddle
HTML
<div class="box">
<div class="image">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
</div>
<div class="tools">
View details
</div>
</div>
<div class="box">
<div class="image">
<img src="https://dummyimage.com/80x80/000/fff">
Lorem ipsum dolor sit amet, consectetur adipisicing dolor sit amet, consectetur.
</div>
<div class="tools">
View details
</div>
</div>
SCSS
.box {
border: 1px solid gray;
width: 100%;
display: flex;
margin-bottom: 15px;
&:after {
content: "";
display: table;
clear: both;
}
.image {
float: left;
width: 60%;
border-right: 1px solid gray;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 5px;
a {
text-decoration: none;
&:not(:last-of-type) {
margin-right: 5px;
}
}
}
.tools {
float: left;
width: 40%;
padding: 5px;
}
}

Answer 1

You can achieve this by adding
.box .image a:last-of-type {
flex: 1 1 0;
}
.box {
border: 1px solid gray;
width: 100%;
display: flex;
margin-bottom: 15px;
}
.box:after {
content: "";
display: table;
clear: both;
}
.box .image {
float: left;
width: 60%;
border-right: 1px solid gray;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 5px;
}
.box .image a {
text-decoration: none;
}
.box .image a:last-of-type {
flex: 1 1 0;
}
.box .image a:not(:last-of-type) {
margin-right: 5px;
}
.box .tools {
float: left;
width: 40%;
padding: 5px;
}
<div class="box">
<div class="image">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
</div>
<div class="tools">
View details
</div>
</div>
<div class="box">
<div class="image">
<img src="https://dummyimage.com/80x80/000/fff">
Lorem ipsum dolor sit amet, consectetur adipisicing dolor sit amet, consectetur.
</div>
<div class="tools">
View details
</div>
</div>

Answer 2

Min Width & Overflow Hidden
If you use min-width of 80px which is your image box size and add overflow:hidden, everything fits in fine and there's nothing falling out.
To make the demo better, I made the other columns a min-width of 80px and total min-width 160px (2x80px) and gave all containers overflow:hidden.
The Working Demo
See it working here
The Code
SCSS
.box {
border: 1px solid gray;
width: 100%;
display: flex;
margin-bottom: 15px;
min-width:160px;
overflow:hidden;
&:after {
content: "";
display: table;
clear: both;
}
.image {
float: left;
width: 60%;
min-width:80px;
overflow:hidden;
border-right: 1px solid gray;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 5px;
a {
text-decoration: none;
&:not(:last-of-type) {
margin-right: 5px;
}
}
}
.tools {
float: left;
width: 40%;
padding: 5px;
overflow:hidden;
flex-wrap: wrap;
min-width:80px;
}
}
HTML
<div class="box">
<div class="image">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
</div>
<div class="tools">
View details
</div>
</div>
<div class="box">
<div class="image">
<img src="https://dummyimage.com/80x80/000/fff">
Lorem ipsum dolor sit amet, consectetur adipisicing dolor sit amet, consectetur.
</div>
<div class="tools">
View details
</div>
</div>

Answer 3

You can add an extra container around the single box and the text. Define it as a flexbox and it will scale according to your desires.
* {
box-sizing: border-box;
}
.box {
border: 1px solid gray;
width: 100%;
display: flex;
margin-bottom: 15px;
}
.box:after {
content: "";
display: table;
clear: both;
}
.image {
width: 60%;
border-right: 1px solid gray;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 5px;
}
.image a {
text-decoration: none;
}
.image a:not(:last-of-type) {
margin-right: 5px;
}
.tools {
width: 40%;
padding: 5px;
}
<div class="box">
<div class="image">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
<img src="https://dummyimage.com/80x80/000/fff">
</div>
<div class="tools">
View details
</div>
</div>
<div class="box">
<div class="image">
<div style="display:flex; align-items: center;">
<img src="https://dummyimage.com/80x80/000/fff">
Lorem ipsum dolor sit amet, consectetur adipisicing dolor sit amet, consectetur.
</div>
</div>
<div class="tools">
View details
</div>
</div>

Answer 4

Please check my fiddle where I added my solution https://jsfiddle.net/Lazzaro/vkrh48tn/
I added new class
.image2 {
width: 60%;
border-right: 1px solid gray;
display: flex;
align-items: center;
flex-wrap: nowrap;
padding: 5px;
a {
text-decoration: none;
&:not(:last-of-type) {
margin-right: 5px;
}
}
}
and it works