Почему содержимое моих блоков переполняется другими блоками?

Question

Я создал страницу в Drupal 8 и Bootstrap с кнопкой «Узнать больше» для расширения информации.

Когда информация свернута, блоки переполняются. Серая линия и метка переполняются в верхнем блоке.

Как это исправить? Спасибо

Здесь серая линия и метка переполняются:

Когда информация развернута, это хорошо:

TWIG:

  <div class="card mb-5 p-0 overflow-hidden shadow rounded bg-white">
    {{ drupal_view('boutique_professionnel_page_diaporama', 'block_1') }}
    <div class="card-body pt-0">
      <div id="readmorecollapse">
        <div class="collapse" id="collapserm" aria-expanded="false">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 p-0 border-bottom">
            <div class="mb-4">
              <div class="mr-4 float-left rounded-lg overflow-hidden">
                {{ store.field_professionnel_logo }}
              </div>
              <h1 class="mt-0">{{ store_entity.name.value }}</h1>
              {{ store.field_professionnel_description }}
            </div>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 bs-left pl-0 mt-3">
            <div class="mb-3">
              {{ drupal_entity('user', store_entity.uid.target_id, 'store_default') }}
            </div>
            <div class="mb-3">
              {{ store.field_professionnel_ets_id }}
            </div>
            <div class="mb-3">
              <a class="text-decoration-none text-primary" href="mailto:{{ store_entity.mail.value }}">{{ store.mail }}</a>
            </div>
            <div class="mb-3">
              <a class="text-decoration-none text-primary" href="tel:{{ store_entity.field_professionnel_telephone.value }}">{{ store.field_professionnel_telephone }}</a>
            </div>
          </div>
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 bs-right pr-0 mt-3">
            <div class="mb-3">
              <a class="text-decoration-none text-primary" href="geo:{{ store_entity.field_localisation.value }}">{{ store.address }}</a>
            </div>
            <div class="mb-3">
              {{ store.field_professionnel_accueil }}
            </div>
            <div class="mb-3">
              {{ store.field_professionnel_horaires }}
            </div>
          </div>
        </div>
        <div class="readmorebutton">
          <a role="button" class="collapsed btn btn-default btn-xs" data-toggle="collapse" href="#collapserm" aria-expanded="false" aria-controls="collapserm">
          </a>
        </div>
      </div>
    </div>
    <div class="card-footer d-flex flex-wrap justify-content-start pt-0">
      <div class="mt-3 mr-3">
        {{ store.flag_report_store }}
      </div>
      <div class="mt-3 mr-3">
        {{ store.flag_like_store }}
      </div>
      <div class="mt-3 mr-3">
        {{ drupal_block('shariff_block') }}
      </div>
    </div>
  </div>

CSS:

#readmorecollapse div.collapse[aria-expanded="false"] {
    height: 100px !important;
    overflow: hidden;
    visibility: visible;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
}

#readmorecollapse div.collapsing[aria-expanded="false"] {
    height: 42px !important;
}

#readmorecollapse .readmorebutton a {
    width: 100%;
}

#readmorecollapse .readmorebutton .collapsed  {
    box-shadow: 0px -10px 25px 0px rgba(255, 255, 253, 0.8);
}

#readmorecollapse .readmorebutton a.collapsed:after  {
    content: 'Afficher toutes les infos';
}

#readmorecollapse .readmorebutton a:not(.collapsed):after {
    content: 'Cacher';
}

Answer 1

Проблема в том, что вам нужно установить overflow: hidden; на первый дочерний элемент div#collapserm. Код css должен быть:

/* Here you need to remove the overflow */
#readmorecollapse div.collapse[aria-expanded="false"] {
    height: 100px !important;
    visibility: visible;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
}

/* Then add a new rule for the first child */
#readmorecollapse div.collapse[aria-expanded="false"] div:nth-child(1) {
    overflow: hidden;
}

#readmorecollapse div.collapsing[aria-expanded="false"] {
    height: 42px !important;
}

#readmorecollapse .readmorebutton a {
    width: 100%;
}

#readmorecollapse .readmorebutton .collapsed  {
    box-shadow: 0px -10px 25px 0px rgba(255, 255, 253, 0.8);
}

#readmorecollapse .readmorebutton a.collapsed:after  {
    content: 'Afficher toutes les infos';
}

#readmorecollapse .readmorebutton a:not(.collapsed):after {
    content: 'Cacher';
}