сохранять одинаковую высоту ссылок в мобильном устройстве независимо от текста / содержимого в ссылке

Question

У меня есть ряд ссылок (bootstrap), на рабочем столе, они в столбцах по всему экрану, но в мобильном, они складываются, что я и хочу. Сейчас они имеют высоту 100% и одинаковую высоту на рабочем столе, независимо от содержимого ссылки. Моя проблема в том, как мне достичь одинаковых высот в мобильном / сложенном макете?

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <a class="link equal-height" href="#">
        <div>
          <p class="link-text">
           ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate facere illum, mollitia nam odit provident repellendus voluptas? A accusamus accusantium ad adipisci aliquam culpa debitis dolore doloremque ea eaque eos eum.
          </p>
        </div>
      </a>
    </div>
    <div class="col-md-4">
         <a class="link equal-height" href="#">
        <div><p class="link-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, doloribus.</p></div>
      </a>
    </div>
    <div class="col-md-4">
      <a class="link equal-height" href="#">
        <div><p class="link-text"> Link Three</p></div>
      </a>
    </div>
  </div>

css:

.link{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 10px 15px;
 }

.equal-heights{
height:100%
}

Answer 1

Вы можете достичь этого с небольшим количеством js

var maxHeight = 0;

$(".link").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});

$(".link").height(maxHeight);

ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 300px;
  margin: 0 auto;
}

li {
  list-style: none;
  padding: .5rem 2rem;
  background: DarkOrchid;
  color: #fff;
  margin: .5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="links">
  <li class="link">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet cumque ut nulla aliquid assumenda eos et est quis, impedit saepe pariatur eligendi iste, reiciendis odio doloremque eveniet quod distinctio molestias?</li>
  <li class="link">link</li>
  <li class="link">link</li>
  <li class="link">link</li>
  <li class="link">link</li>
</ul>

Answer 2

вы можете переписать свой макет с помощью grid и использовать 1fr размеры.

PO C:

.container {
display: grid;
grid-template-rows: 1fr 1fr 1fr
}

a {
display: block;
margin: 10px;
padding: 10px;
border: solid;
}

<div class="container">
  <a>ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate facere illum, mollitia nam odit provident repellendus voluptas? A accusamus accusantium ad adipisci aliquam culpa debitis dolore doloremque ea eaque eos eum.</a>
  <a>abc</a>
  <a>ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate facere illum</a>
</div>

подробнее: https://css-tricks.com/snippets/css/complete-guide-grid/