Можно ли ограничить ширину текста, шириной картинки?

Question

[Александр Варлаков]

Есть блоки для слайдера.

Есть идеи как ограничить ширину текста, шириной картинки, без указания фиксированной ширины?

HTML:

<div class="gallery-card">
    <div class="gallery-card__img-wrap">
           <img  class="gallery-card__img" src="assets/img/gallery/img_1.png" alt="Поездка на квадроциклах">
     </div>

    <div class="gallery-card__text-block">
           <h3 class="gallery-card__title">Поездка на квадроциклах</h3>
           <p class="gallery-card__description">Вы поедете в горы на несколько часов.</p>
           <p class="gallery-card__price gradient-title">от 15 000 рублей</p>
     </div>
</div>

CSS не вставляю, там только font-size

Пробовал, задавать gallery-card__text-block, max-width: 100%, что-то не работает

JS не как вариант не предлагать - это я могу реализовать сам - понимаю и знаю как, реализую в крайнем случае.

Есть ли идеи по CSS?

Примерно так:

Answer 1

[comoket]

https://jsfiddle.net/3mb6Ltp9/

Comments

[Александр Варлаков]

1. ОГРООООООООООООООООООООООООООмноЕ спасибо!
2. Можешь объяснить с точки зрения логики как работает ЭТО? - findle попробовал удалять свойства у класса а .text - разваливается. Принцип работы интересен

[comoket]

Задаем ширину блока с текстом равную 0 (width: 0) при этом она не может быть меньше ширины родителя (min-width: 100%).

Answer 2

[AnanasikDev]

Это надо делать в одном диве, тогда max-width будет подстраиваться под картинку

Comments

[Александр Варлаков]

Что-то то нет...

Answer 3

[Александр Крепышев]

Grid html css 2 класса адаптивно.
https://jsfiddle.net/akk77/a7zqch90/3/