Div одинаковой высоты, гибкости и высоты не работает?

Question

Я создал блок с именем textCard в WPBakery. Разметка для этого блока обернута вокруг классов Bakery по умолчанию, которые разрывают разметку следующим образом:

.textCard {
  border: 1px solid red;
  display: flex;
  height: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row justify-content-center">
  <div class="container test d-flex">
    <div class="col-sm-4">
      <div class="vc_column-inner">
        <div class="wpb_wrapper">
          <div class="textCard">
            <div class="textCard__container">
              <div class="textCard__content text-left">
                <h3>heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="vc_column-inner">
        <div class="wpb_wrapper">
          <div class="textCard">
            <div class="textCard__container">
              <div class="textCard__content text-left">
                <h3>This is heading</h3>
                <p>This is content</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="vc_column-inner">
        <div class="wpb_wrapper">
          <div class="textCard">
            <div class="textCard__container">
              <div class="textCard__content text-left">
                <h3>This is header</h3>
                <p>This is content</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Не уверен, почему вышеупомянутый CSS работает, когда обертки удалены:

.textCard {
  border: 1px solid red;
  display: flex;
  height: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row justify-content-center">
  <div class="container test d-flex">

    <div class="col-sm-4">
      <div class="textCard">
        <div class="textCard__container">
          <div class="textCard__content text-left">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="textCard">
        <div class="textCard__container">
          <div class="textCard__content text-left">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing </p>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="textCard">
        <div class="textCard__container">
          <div class="textCard__content text-left">
            <p>Lorem ipsum dolor </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.vc_column-inner и .wpb_wrapper не имеют назначенных им стилей, поэтому не уверены, что может быть причиной этого результата?

Answer 1

Это потому, что на ваш стиль больше не влияет фактическая высота, так как он вложен в два элемента <div>.Следующий стиль должен быть потомком class="col-sm-4"

Изменить стиль на

.vc_column-inner {
  border: 1px solid red;
  display: flex;
  height: 100%;
}

или переместить <div class="textCard"> в <div class="col-sm-4">

Answer 2

Когда вы помещаете ваш textCard в обертку, а затем устанавливаете ее на 100% высоты, она принимает 100% высоты родительской обертки, которая в этом случае имела свойство по умолчанию height: auto;, поэтому оно было свернуто.

Если высота: авто;элемент автоматически отрегулирует свою высоту, чтобы его содержимое отображалось правильно.- W3Schools

Причина, по которой это сработало, когда вы вынули 2 обертки, заключается в том, что col-sm-4 был полной высоты, так как он получил свойство align-items: stretch; по умолчанию в качестве своего родителяis display: flex;.

Простое добавление правила, чтобы сделать обертки на 100% ростом их родителей, а также textCard исправляет эту проблему.

View CodePen

.textCard {
  border: 1px solid red;
  display: flex;
}

.vc_column-inner,
.wpb_wrapper,
.textCard {
  height: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row justify-content-center">
  <div class="container test d-flex">
    <div class="col-sm-4">
      <div class="vc_column-inner">
        <div class="wpb_wrapper">
          <div class="textCard">
            <div class="textCard__container">
              <div class="textCard__content text-left">
                <h3>heading</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="vc_column-inner">
        <div class="wpb_wrapper">
          <div class="textCard">
            <div class="textCard__container">
              <div class="textCard__content text-left">
                <h3>This is heading</h3>
                <p>This is content</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="vc_column-inner">
        <div class="wpb_wrapper">
          <div class="textCard">
            <div class="textCard__container">
              <div class="textCard__content text-left">
                <h3>This is header</h3>
                <p>This is content</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

Если я правильно понял, вам не нужно использовать класс начальной загрузки .col-4, если вы используете display:flex.

Вы установили высоту элементов, равную 100% и равную display:flex, что означает, что они будут соответствовать высоте 100%.

Однако это происходит по умолчанию, если вы установите .container на display:flex и дочерние элементы .textCard на flex:1 будут отображаться одинаково. Дочерние элементы по умолчанию установлены как align-items: stretch из-за их гибкого контейнера.

См. Здесь кодовый блок, надеюсь, это то, что вы имели в виду! https://codepen.io/Robhern135/pen/LKaGVL