Тег с текстом-оберткой приводит к увеличению ширины родительского элемента div? ⇐ CSS

[Anonymous]

Хотелось бы получить разъяснения, почему это происходит.

У меня есть родительский элемент div, для которого установлено значение width:70%

Внутри родительского div у меня есть еще два div, расположенных рядом. Левый элемент div имеет width:15%, а правый элемент управления не имеет класса. Как я и ожидал, левый элемент div составляет 15 % ширины родительского блока.

Однако, когда я добавляю тег [*] с таким большим количеством текста, что текст переносится на следующую строку, создается впечатление, что левый элемент div сжимается по ширине. Он уже 15 % ширины родительского элемента div.

Изменение width: 15% на min-width: 15% решает проблему, но хотелось бы знать, почему.

body { фон: #6e28d9; отступ: 0 24 пикселя; белый цвет; /* Меняем цвет на желтый */ маржа: 0; высота: 100вх; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; } .родитель { ширина: 70%; дисплей: гибкий; стиль границы: сплошной; ширина границы: 2 пикселя; цвет границы: белый; } .левый { ширина: 15%; Левый Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. "Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua. Adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua."< /ли>

https://playcode.io/1647378