CSS flex wrap, но без переноса

Question

У меня проблема с flex-wrap.Где мне нужно flex-wrap: wrap, чтобы позаботиться о том, чтобы изображения обернулись и не вышли из контейнера.Мне не нужно переносить ссылку.Смотрите мою проблему ниже, также мой код включен в сообщение.

JSFiddle

HTML

<div class="box">
  <div class="image">
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
  </div>
  <div class="tools">
    <a href="#">View details</a>
  </div>
</div>

<div class="box">
  <div class="image">
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing dolor sit amet, consectetur.</a>
  </div>
  <div class="tools">
    <a href="#">View details</a>
  </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

Мин. Ширина и переполнение скрыты

Если вы используете min-width из 80px, который соответствует размеру вашего графического блока, и добавляете overflow:hidden, все в порядке и ничего не выпадает.

Чтобы сделать демонстрацию лучше, я сделал другие столбцы min-width из 80px и всего min-width 160px (2x80px) и дал всем контейнерам overflow:hidden.

Рабочая демоверсия

Посмотрите, как это работает здесь

Код

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">
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
  </div>
  <div class="tools">
    <a href="#">View details</a>
  </div>
</div>

<div class="box">
  <div class="image">
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing dolor sit amet, consectetur.</a>
  </div>
  <div class="tools">
    <a href="#">View details</a>
  </div>
</div>

Answer 2

Вы можете достичь этого, добавив

.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">
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
  </div>
  <div class="tools">
    <a href="#">View details</a>
  </div>
</div>

<div class="box">
  <div class="image">
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing dolor sit amet, consectetur.</a>
  </div>
  <div class="tools">
    <a href="#">View details</a>
  </div>
</div>

Answer 3

Вы можете добавить дополнительный контейнер вокруг одного поля и текста. Определите его как flexbox, и он будет масштабироваться в соответствии с вашими желаниями.

* {
  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">
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
  </div>
  <div class="tools">
    <a href="#">View details</a>
  </div>
</div>

<div class="box">
  <div class="image">
    <div style="display:flex; align-items: center;">
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing dolor sit amet, consectetur.</a>
    </div>
  </div>
  <div class="tools">
    <a href="#">View details</a>
  </div>
</div>

Answer 4

Пожалуйста, проверьте мою скрипку, где я добавил свое решение https://jsfiddle.net/Lazzaro/vkrh48tn/

Я добавил новый класс

.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;
      }
    }
  }

и все работает