html - 等高、 flex 和高度的 Div 不起作用？

Question

我在 WPBakery 中创建了一个名为 textCard 的 block 。这个 block 的标记包裹在默认的 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

当您将 textCard 放入包装器中然后强制其高度为 100% 时，它将占用父包装器的 100% 高度，在本例中其具有默认属性 height: auto; 所以它被折叠了。

If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. - W3Schools

当你取出 2 个包装器时它起作用的原因是因为 col-sm-4 是全高的，因为它获得了属性 align-items: stretch;默认情况下，它的父级是 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>