Как правильно сверстать бокс, чтобы кнопки не опускались вниз?

Question

[Андрей Чирков]

Как сделать чтобы при добавлении текста в эту область, кнопки не сьезжали вниз?

КОД HTML:

<div class="info-box pink">
      <div class="info-box__icon"><img src="img/works_icons/camera-retro.svg" alt="img" class="info-box__img"></div>
      <h4 class="info-box__title">Test Image</h4>
      <p class="info-box__text">Lorem ipsum dolor sit amet consectetur adipisicing.</p>
      <a class="info-box__btn-more btn-more">Know More</a>
    </div>

КОД CSS:

.info-box {
 display: flex;
 flex-direction: column;
 align-items:center;
 text-align: center;
 margin:25px 15px;
 flex-shrink: 0;
 flex-grow: 0;
 width: 230px;
 color:@white_color;
 margin-bottom: 100px;
 max-height: 100%;
 .info-box__icon {
  filter:invert(1);
  margin-bottom: 25px;
  margin-top: 35px;
  opacity: 0.8;
  width: 40px;
  height: 40px;
 }
 .info-box__title {
  margin-bottom: 10px;
 }
 .info-box__text {
  padding:10px;
  font-weight: normal;
  opacity: 0.7;
  line-height: 15px;
  font-size: 12px;
 }
 .info-box__btn-more {
  position: relative;
  top: 8%;
 }
}

Если текст не добавлять, то все норм, но как по мне такое никуда не годится.
И да, в адаптиве для телефонов при добавлении текста кнопки не сьезжают, ну оно понятно почему.

Answer 1

[Андрей Суровцев]

Если я всё правильно понял, если нужно добавить текста, то кнопка должна быть на переднем плане, накрывая текст, если так, то решение такое:

.info-box__btn-more {
position: absolute;
top: 8%; /*Процент увеличивайте на такой который вам нужно и кнопка будет оставаться на месте, независимо от того сколько текста вы впихнёте */
}

Если не подошло, то опишите подробнее.

Comments

[Андрей Чирков]

такое решение не подойдет, т.к кнопки сами должны вставать в такое положение в зависимости от кол-ва текста. Аналогично я могу и с релативом указывать такой процент

[Lord_Dantes]

Андрей Суровцев вы предлагаете так на каждых 100 пикселей смартфонов задать новые проценты?

[Steppp]

А почему бы для текста не задать max-height???

[Андрей Суровцев]

мне не совсем понятно что вы хотите, решение я написал исходя из описания в вопросе.

Answer 2

[Lord_Dantes]

Задать максимальную высоту, заранее самому высчитав её.
max-height: 500px;

При достижении высоты текст будет скролится, но вы это уже можете убрать или стилизовать самому.

В адаптиве убираем max-height, сами знаете почему.