css - 使用 flexbox 打断文本

Question

我希望我的代码执行此代码段中的操作，但在我的浏览器中它显示为如图所示。我认为是 flexbox 导致了这个问题。任何人都知道为什么会这样以及如何解决它？

我已经检查过它是否在其他类上，但是这个 div 与其他 div 及其类完全分开

.activity-snippets {
  display: flex;
}

.activity-post-link {
  height: 215px;
  width: 33.33333333%;
  padding-right: 12px;
  padding-left: 12px;
  flex-grow: 0;
}

.activity-post-link img {
  max-width: 100%;
}

.activity-post-link a {
  text-decoration: none;
}

  <div class="activity-snippets">

    <div class="activity-post-link">
      <a>
        <img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
        <h2>
          My Girl's Cave for $55
        </h2>
        </a>
    </div>


    <div class="activity-post-link">
      <a>
        <img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
          <h2>
            Turning a French Door Into a Shower Wall.
          </h2>
      </a>
    </div>


    <div class="activity-post-link">
      <a>
        <img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
        <h2>
          LOVE SHELF
        </h2>
      </a>
    </div>
  </div>

Answer 1

如果代码片段看起来不错，但您的实际完整代码却不行，那么您的代码中一定有其他东西阻止了文本换行。

看起来您的 flex 元素大小正确，但您的文本溢出。检查是否有一些 white-space: nowrap; 被应用到你完整代码中任何地方的那些 h2s。