Почему класс строки делает мой внешний div подходящим к размеру

Question

Я определяю некоторые html, у которых есть поле div, окружающее изображение. Я хочу, чтобы это поле автоматически изменяло размер изображения. Я обнаружил, что следующий код дает мне то, что я хочу:

<div class="container">
  <div class="fill">
    <div class="row">
      <div class="my-box" style="height: 100%;">
        <div data-sink="reveal"><img src="https://www.w3schools.com/html/pic_trulli.jpg" style="max-width: 100%; max-height: 100%; background-size: contain;"></div>
      </div>
    </div>
  </div>
</div>

JSFiddle здесь

Однако, когда я пытаюсь удалить класс строки, я внезапно теряю этот эффект, но я понятия не имею почему. Таким образом, точно такой же код с удаленным классом строки приводит к тому, что блок растягивается на всю ширину экрана:

<div class="container">
  <div class="fill">
    <div>
      <div class="my-box" style="height: 100%;">
        <div data-sink="reveal"><img src="https://www.w3schools.com/html/pic_trulli.jpg" style="max-width: 100%; max-height: 100%; background-size: contain;"></div>
      </div>
    </div>
  </div>
</div>

Поэтому мой вопрос заключается в том, как я могу правильно настроить рамку для моего изображения без необходимости использовать класс строки?

Answer 1

Поскольку класс строки принимает display: flex;

добавление к заполнению класса display: flex;

Таким образом, это лучше сделать в файле css, но здесь просто для примера. .

<div class="container">
  <div class="fill" style="display: flex">
      <div class="my-box" style="height: 100%;">
        <div data-sink="reveal"><img src="https://www.w3schools.com/html/pic_trulli.jpg" style="max-width: 100%; max-height: 100%; background-size: contain;"></div>
      </div>
  </div>
</div>

Пиз