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

Question

У меня есть форма, которую я хочу центрировать по вертикали, и, щелкнув ссылку ( addAnother ), каждый раз добавляю ввод в html, и при достижении прокрутки высоты браузера применяется к его контейнеру.Я использую display: table-cell и overflow-y: scroll, но затем содержимое выравнивается по центру.

<div class="row justify-content-center align-items-center">
    <div class="col-12 col-sm-10 col-md-8 col-xl-6">
        <div id="spaceTeammatesBox" class="space-box form animated fadeInLeft">
            <div class="team-emails-outer">
                <div class="team-emails-inner">
                    <h3 class="mb-4">{% trans "Who is on your team?" %}</h3>
                    <div class="form-group forms">
                        <input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
                        <span class="input-line" data-placeholder="Ex. name@example.com"></span>
                    </div>
                    <div class="form-group forms">
                        <input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
                        <span class="input-line" data-placeholder="Ex. name@example.com"></span>
                    </div>
                    <div class="form-group forms">
                        <input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
                        <span class="input-line" data-placeholder="Ex. name@example.com"></span>
                    </div>
                </div>
                <div>
                    <div class="add-teammate-link d-flex flex-row-reverse text-right">
                        <a href="#" id="addAnother">{% trans "add another" %}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

в js У меня есть:

$('#addAnother').click(function() {
        $('#spaceTeammatesBox').find('.form-group.forms').last().after(`
            <div class="form-group forms">
                <input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
                <span class="input-line" data-placeholder="Ex. name@example.com"></span>
            </div>
        `);
    });

в css:

#spaceTeammatesBox {
    background: lightblue;
    display: table;
    width: 100%;
}

.team-emails-outer {
    display: table-cell;
    width: 100%;
}

.team-emails-inner {
    height: calc(100vh - 100px);
    overflow-y: scroll;
}

Как можно одновременно настроить вертикальное выравнивание и вертикальную прокрутку в начальной загрузке 4?Ваша помощь ценится заранее.

Answer 1

Для этого вы можете использовать два контейнера: один для размещения вещей по вертикали, а другой для прокрутки.В твоей клетке я бы добавил к <div class="team-emails-inner"> новый класс centered-content.Затем содержимое этого div я бы обернул в другой контейнер с классом scroll-box.CSS для обоих классов выглядит следующим образом:

.centered-content {
  display: flex;
  align-items: center; /* this vertically centers the child container */
}

.centered-content .scroll-box {
  max-height: 100%; /* this prevents the scroll-box to overflow the height of the parent */
  width: 100%; /* this pushes the scrollbar to the very edge of the box */
  overflow: auto; /* and this allows the scroll to appear only when necessary */
}

Все работает так (откройте его на полной странице):

$('#addAnother').click(function() {
  $('#spaceTeammatesBox').find('.form-group.forms').last().after(`
            <div class="form-group forms">
                <input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
                <span class="input-line" data-placeholder="Ex. name@example.com"></span>
            </div>
        `);
});

#spaceTeammatesBox {
  background: lightblue;
  width: 100%;
}

.team-emails-inner {
  height: calc(100vh - 100px);
  padding: 10px;
}

.centered-content {
  display: flex;
  align-items: center;
}

.centered-content .scroll-box {
  max-height: 100%;
  width: 100%;
  overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="row justify-content-center align-items-center">
  <div class="col-12 col-sm-10 col-md-8 col-xl-6">
    <div id="spaceTeammatesBox" class="space-box form animated fadeInLeft">
      <div class="team-emails-outer">
        <div class="team-emails-inner centered-content">
          <section class="scroll-box">
            <h3 class="mb-4">{% trans "Who is on your team?" %}</h3>
            <div class="form-group forms">
              <input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
              <span class="input-line" data-placeholder="Ex. name@example.com"></span>
            </div>
            <div class="form-group forms">
              <input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
              <span class="input-line" data-placeholder="Ex. name@example.com"></span>
            </div>
            <div class="form-group forms">
              <input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
              <span class="input-line" data-placeholder="Ex. name@example.com"></span>
            </div>
          </section>
        </div>
        <div>
          <div class="add-teammate-link d-flex flex-row-reverse text-right">
            <a href="#" id="addAnother">{% trans "add another" %}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>