Setting width of div element in a flex container

Question

So I have a flex container with 2 children. And I want to assign a fixed width to the first child. But If I set width: 200px, for some reason it does not work.

Here's my code:

.carousel {
        background-color: #087f5b;
        color: white;
        padding: 32px;
        width: 800px;

        display: flex;
        gap: 88px;
        position: relative;
      }

.img-container {
        width: 200px;
        height: 200px;
        border: 1px solid;
      }

<div class="carousel">
        <div class="img-container">&nbsp;</div>
        <blockquote>
          <p class="testimonial-text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum,
            sapiente labore! Accusantium, voluptas omnis dicta facere, porro
            mollitia minus ad ut debitis consequuntur.
          </p>
        </blockquote>
      </div>

However, if I use min-width instead of just width, it works alright.

I also found out that if I delete some text from the blockquote, then it works fine.

Answer 1

.carousel {
        background-color: #087f5b;
        color: white;
        padding: 32px;
        width: 800px;

        display: flex;
        gap: 88px;
        position: relative;
      }

.img-container {
        width: 200px;
        height: 200px;
        border: 1px solid;
      }
      
.carousel blockquote {
       flex: 1;
}

<div class="carousel">
        <div class="img-container">&nbsp;</div>
        <blockquote>
          <p class="testimonial-text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum,
            sapiente labore! Accusantium, voluptas omnis dicta facere, porro
            mollitia minus ad ut debitis consequuntur.
          </p>
        </blockquote>
      </div>