Создать равную высоту столбца в мобильной версии

Question

Я только что создал сайт объявлений , на котором есть некоторые элементы на главной странице, и я хочу, чтобы он был равен высоте столбца. Он хорошо работает в настольной версии, но не работает для мобильных устройств. Я пытался использовать display: grid;, чтобы сделать его равным, но это не работает. Есть ли другой способ, как решить эту проблему?

Answer 1

вы можете использовать max-heigh и min-height , чтобы установить для вас какое-то точное ограничение:

main{
  width: 300px;
  height: auto;
  background:red;
}

.tstbx{
  width:100px;
  background:yellow;
  max-height:120px;
  min-heigh:120px;
  overflow:scroll;
  margin:10px;
  display:inline-block;
}

<main>
  <div class="tstbx">
  <a>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
</a>
</div>

<div class="tstbx">
  <a>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
</a>
</div>

<div class="tstbx">
  <a>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
</a>
</div>
  
</main>