Всем привет. Подскажите, как правильно отрисовывать вот такой элемент внутри карточки ? т.е. он должен быть всегда к левому нижнему углу, но главное - не вылазить за пределы карточки.  Я сделал с помощью relative для img контейнера, и absolute для самого блочка этого. Но меня смущают  top: 85%;
 left: 64.5%;  эти значения... И то, что ширину блочка я ограничил вручную, и если там будет текст больше - случится беда ведь.....

bottom: 0; right: 0;

почему топ и лефт, если оно снизу справа?

шушуть теперь не так , переписал на боттом 2% райт 0))) Спасибо

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

всё там так!

Родителю изображения дай display:flex; чтобы убрать отступ снизу невидимый у изображения

беда с текстом, занимающим много места - типичная боль абсолютного расположения. Поэтому с ним аккуратней. Проще использовать float или flexbox, но не всегда это возможно.

Первый класс - для всех вложенных блочков, нижние 2 - ставятся динамически в зависимости от текста, либо первый либо второй .  Я ограничил им max-width , но если текст будет больше - то оно вылезет всё....Какие идеи?

нипанятна

Спасибо, теперь с боттом 0 все ок))

@imba90 codepen сделай, а то не ясно, что там за блок

Ev Sh, для помощи по твоему вопросу требуется код. Пожалуйста, выложи его сюда -> CodePen

Смотри, есть 2 типа таких вложенных блочков - голубой и оранжевый. Они ставятся в зависимости от текста внутри . Сейчас текст одинаковый по длинне и там и там почти, поэтому все ок, если задать блочку max-width :130px к примеру. Но что будет, если текст придет больше по длинне?

@ar_rnd о, тыж дизайнер? Подскажи как лучше реализовать такой инпут)

пойдёт вверх

и чо?

А тебе как надо, куда текст должен идти?)

Да, сейчас все красиво. Это раньше из за кривых bottom и тд в % были косяки, оно вылазило за карточки же, из за абсолюта, если ширину не ограничить. А так все ок)