Можно ли сделать автоматическое выравнивание по высоте (убрать вертикальную прокрутку)?

Question

[Станислав]

Имеется фреймворк Materializecss и плагин к нему Materialize Stepper. Но не получается сделать автоматическое выравнивание блоков-шагов по высоте содержимого - появляется вертикальная прокрутка. Автор плагина предлагает делать фиксированную высоту, но такой вариант не устраивает. Можно ли это исправить?
Пример работы и код.

Answer 1

[Станислав]

К сожалению решение найти так и не удалось, пришлось в качестве степпера исользовать табы.

<div class="col s12">
    <ul class="tabs">
      <li class="tab col s4"><a href="#step1" class="active">Step 1</a></li>
      <li class="tab col s4"><a href="#step2">Step 2</a></li>
      <li class="tab col s4"><a href="#step3">Step 3</a></li>
    </ul>
</div>
<div id='step1' class="col s12">
  <a href='#step2' class="waves-effect waves-light btn button-tabs">Continue</a>
</div>
<div id='step2' class="col s12">
  <a href='#step1' class="waves-effect waves-light btn button-tabs">Back</a>
  <a href='#step3' class="waves-effect waves-light btn button-tabs">Continue</a>
</div>
<div id='step3' class="col s12">
    <a href='#step2' class="waves-effect waves-light btn button-tabs">Back</a>
</div>

$(function () {
    // Initialize Tabs
    $('ul.tabs').tabs();
    // Create nav buttons
    $('.button-tabs').click(function() {
        var target = $(this).attr('href').replace('#', '');
        $('ul.tabs').tabs('select_tab', target);
    });
});

Answer 2

[RTW]

Ты про блок с кучей "test"?
Если да, как вариант флексы вешаешь
Вроде

.input-field {
    position: relative;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 100%;
}
.row {
    height: 100%;
}

Comments

[Станислав]

Спасибо, но к сожалению не работает, просто изменилось направление текста, т.е. текст выводится не в 1 столбик а в несколько. Высота блока не подстраивается под содержимое. Результат