Flexbox - Horizontal component with full height squared image

Question

I try to achieve what seems to be a very easy task with flexbox, but after hours, I fail...

I just want to create a responsive horizontal component with an image on the left who always be 100% height and some flexible width text on the right.

Should be easy, but the image never stops overlapping in the best case...

body {
  font-family: sans-serif;
}

.card {
  background: #F1F1F2;
  display: flex;
}

.card-img {
  border: 1px solid green;
}

img {
  display: block;
  height: 100%;
  width: auto;
}

.card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid blue;
}

<div class="card">
  <div class="card-img">
    <img src="http://placehold.it/100x100" alt="Card image">
  </div>
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

Answer 1

In your case, it is impossiple to make the right div have same height with the image because:

The height of the right div depend on it's witdh. Because of the parent div has fixed width so the width of the right div depend on the left div's width. The left div width depend on the image height. So when you change image height, the right div height change too. Now, i think the best way is give the image a fixed size.

body {
  font-family: sans-serif;
}

.card {
  background: #F1F1F2;
  display: flex;
}

.card-img {
  border: 1px solid green;
}

img {
  display: block;
  height: 130px;
  width: auto;
}

.card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid blue;
}

<div class="card">
  <div class="card-img">
    <img src="http://placehold.it/100x100" alt="Card image">
  </div>
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

Answer 2

.card-grid{
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-rows: 200px;
  grid-gap: 0.5em;
}
.card-grid-img img{
  max-width: 200px;
  height: 100%;
  display: block;
  width: auto;
}
.card-grid-body{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<div class="card-grid">
  <div class="card-grid-img">
    <img src="http://www.salavaux.ch/222/5_sq.jpg" alt="Card image">
  </div>
  <div class="card-grid-body">
    <h4 class="card-grid-title">Card title</h4>
    <p class="card-grid-text">Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit. Some amazing content lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

Using grid you could then add a constraint on height first column elements.