Гибкий ряд заставляет дочернее изображение уменьшать высоту до 100% другого содержимого

Question

Возьмите следующий пример;

.row {
  background: #F88;
  margin-top: 20px;
}

.cont {
  display: block;
  height: 82px;
  width: 82px;
  background-color: #0AF;
}

.txt {
  background-color: #0C0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row no-gutters">
    <div class="col-auto"><div class="cont">82px</div></div>
    <div class="col-auto"><img src="https://i.imgur.com/WIxmfZb.png" /></div>
    <div class="col"><div class="txt">Text content</div></div>
  </div>  
</div>

Я бы хотел, чтобы изображение размером 100x100 уменьшилось до высоты следующего самого высокого столбца (в данном примере это будет блок-блок 82px в 1-м столбце), сохраняя соотношение сторон.

До сих пор я пробовал различные комбинации flex-base, flex-shrink, и одно из решений, которое мне удалось своего рода , - этоустановите стиль изображения на height: 0; min-height: 100%;, который работает в инспекторе, однако;

• Это выявило ошибку в Chrome, где ширина изображения изначально равна 0, пока вы не измените размер окна, чтоотобразит правильное соотношение сторон
• В IE это не сработало> _>
• Я уверен, что это нарушает какое-то международное право против пыток следующего разработчика, котороезабрать мой код

После нескольких часов грубой силы мне еще предстоит найти решение, где

• Изображение правильно заполняет 100% гибкостивысота (игнорируя собственный хейght)
• Изображение сохраняет свое соотношение сторон
• Изображение не переполняется
• Изображение не совсем расположено
• Размер изображенияявно не установлено

Идеальное решение должно выглядеть следующим образом:

Любая помощь будет принята с благодарностью.

Answer 1

Я установил изображение на ту же высоту, что и первый столбец, ограничив его ширину тем же размером:

.same-as-column-1 {
  max-width: 82px;
}

Я не был уверен, разрешено ли третьему столбцу быть выше, оно блокируетсяхорошо, если он ограничен той же высотой, но не уверен, что это работает для реального случая использования.

В любом случае, кажется, что изображение соответствует требованиям, заполняет 100% высоты изгиба, сохраняет соотношение сторон, нене переполнен и не совсем позиционирован /

.row {
  background: #F88;
  margin-top: 20px;
}

.cont {
  display: block;
  height: 82px;
  width: 82px;
  background-color: #0AF;
}

.same-as-column-1 {
  max-width: 82px;
}

.txt {
  background-color: #0C0;
  max-height: 82px;
  overflow-y: scroll;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row no-gutters flex-row flex-nowrap">
    <div class="col-auto">
      <div class="cont">
        82px
      </div>
    </div>
    <div class="col-auto">
      <img class="same-as-column-1" src="https://i.imgur.com/WIxmfZb.png" />
    </div>
    <div class="col">
      <div class="txt">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sit amet massa quis nunc porta rutrum nec ac tellus. Phasellus eget ligula tristique, tristique elit ac, mollis eros. Aenean lobortis volutpat sem, et eleifend metus faucibus sed.
          Vivamus at varius nibh. Suspendisse rhoncus posuere elit sed tincidunt. Curabitur blandit in ipsum ut tempor. Mauris et eleifend justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris sollicitudin
          vehicula urna, egestas cursus dolor efficitur id. Aenean tempus vestibulum mauris, a accumsan sem vulputate quis. Maecenas tempor rhoncus molestie. Proin erat metus, cursus lacinia sodales non, malesuada non felis.</p>

        <p>Ut ac luctus elit. Mauris id ipsum id dolor hendrerit rhoncus. Fusce a ligula gravida, porttitor magna a, feugiat est. Maecenas at leo mi. Phasellus volutpat ex vitae nisl euismod, a luctus odio tristique. Maecenas eget tincidunt eros. Etiam auctor
          velit at felis condimentum, sit amet feugiat dolor auctor. Mauris tempus nulla quis ullamcorper porttitor. Etiam nec neque congue, molestie diam vel, suscipit dui. Sed mollis id dolor ut lacinia. Nulla facilisi. Suspendisse ut pellentesque metus.
          In tincidunt ante at pretium mattis. Aliquam egestas neque vel nisi cursus rhoncus.</p>
      </div>
    </div>
  </div>
</div>