img-fluid does not work when wrapped inside flex-shrink-0

[kkvero]

Hey! Bootstrap is great!
I am using "Media + Object" layout from here.
So my image is inside flex-shrink-0 and details/text inside flex-grow-1.
However img-fluid does not work (wider images don't shrink on small media).

• Like this, the media + object idea works (image column takes as little width as possible), img-fluid doesn't work:

    <div class="d-flex flex-wrap flex-lg-nowrap">
          <div id="display_photo" class="flex-shrink-0 mb-2 me-3">
            {% if photos.0 %}
              <img src="{{ photos.0.1.url }}" class="img-fluid rounded" width="{{ photos.0.1.width }}" height="{{ photo.0.1.height }}" alt="Photo" />
            {% endif %}
          </div>

       <div class="flex-grow-1">
          <!-- details, text -->
         </div>
    </div>

• Wrapping img inside container, container-fluid or container-md does not make image responsive either:

        <div class="flex-shrink-0 mb-2 me-3">
          <div class="container-fluid">
            {% if photos.0 %}
              <img src="{{ photos.0.1.url }}" class="img-fluid rounded" width="{{ photos.0.1.width }}" height="{{ photo.0.1.height }}" alt="Photo" />

• Like this, img-fluid works, but it breaks the "Media + Object" idea (flex-shrink-0 doesn't work, narrow images leave a lot of blank space on the side on wider screens. )

        <div class="container-fluid">
          <div id="display_photo" class="flex-shrink-0 mb-2 me-3">
            {% if photos.0 %}
              <img src="{{ photos.0.1.url }}" class="img-fluid rounded" width="{{ photos.0.1.width }}" height="{{ photo.0.1.height }}" alt="Photo" />
            {% endif %}
          </div>
        </div>

Is there a combination of BS classes that would make img-fluid work inside flex-shrink-0?

[kkvero]

Ok, I think

<div class="container-xs">
          <div id="display_photo" class="flex-shrink-0 mb-2 me-3">
<!--..-->

solved it.