Почему свойство width: 100% не принимает значение родителя?

Question

[Dmitry Quick]

Есть секция и обертка, разделенная на два айтема. В каждом айтеме находится изображение и текст поверх. Для обертки этих айтемов я задал максимальную ширину. Для изображения я задал ширину в 100%, однако изображения не приняли значения родителя. Полоса прокрутки в окне все равно осталась - изображения выходят за границы. Почему свойство width: 100% не применилось. Вот код:

<section class="data">
        <div class="title">
            Варианты развертывания Ваших данных
        </div>
        <div class="data__wrapper">
            <div class="data-item">
                <div class="data-item__title">Облачное хранилище</div>
                <div class="data-item__text"></div>
                <img src="img/variants/cloud.jpg" alt="" class="data-item__img">
                <div class="data-item__square"></div>
            </div>
            <div class="data-item">
                <div class="data-item__title">Размещение не сервере</div>
                <div class="data-item__text"></div>
                <img src="img/variants/server.jpg" alt="" class="data-item__img">
                <div class="data-item__square"></div>
            </div>
        </div>
    </section>

.data
    min-height: 580px
    &__wrapper
        max-width: 1263.33px
        display: flex
        justify-content: space-between
    .data-item
        height: 580px
        max-width: 631.665px
        &__img
        //    max-width: 631.665px
           width: 100%

Comments

[Павел]

Разве не так?

.data
    min-height: 580px
    &__wrapper
        max-width: 1263.33px
        display: flex
        justify-content: space-between
    .data-item
        height: 580px
        max-width: 631.665px
        img
        //    max-width: 631.665px
           width: 100%

[Антон Литвиненко]

Для адаптивных изображений нужно как раз max-width 100%

Answer 1

[kocherman]

Надо смотреть верстку более детально.
Может быть, в CSS надо прописать вот это:

.data-item, .data-item * {
box-sizing: border-box;
}