柔性盒中的意外变形

Question

我有3个使用flexbox的偶数列。在CodePen中，它看起来更加清晰：https://codepen.io/pixy-dixy/pen/KKVwvoQ

代码如下：

.rowIdeas {
  text-align: center;
  display: flex;
  justify-content: space-around;
  flex-direction: row-reverse;
}

.columnIdeas {
  flex-basis: 25%;
}

.maxSize {
  max-height: 300px;
}

<!-- about ideas section start -->

<div class="rowIdeas">
  <div class="columnIdeas iransansdnlight">
    <div>
      <img class="maxSize" src="https://langfox.ir/vc/philosophy.svg">
      <h2>Item one</h2>
      <p>Flex items do not need to be block level unless the content they contain requires it. Also, you've prefixed all of the display properties, but didn't prefix any of the other Flexbox properties (which have different names in the other drafts).</p>
    </div>
  </div>
  <div class="idea columnIdeas iransansdnlight">
    <div>
      <img class="maxSize" src="https://langfox.ir/vc/idea.svg">
      <h2>item two</h2>
      <p>Flex items do not need to be block level unless the content they contain requires it. Also, you've prefixed all of the display properties, but didn't prefix any of the other Flexbox properties (which have different names in the other drafts).
    </div>
  </div>
  <div class="columnIdeas iransansdnlight">
    <div>
      <img class="maxSize" src="https://langfox.ir/vc/results.svg">
      <h2>item three</h2>
      <p>Flex items do not need to be block level unless the content they contain requires it. Also, you've prefixed all of the display properties, but didn't prefix any of the other Flexbox properties (which have different names in the other drafts).</p>
    </div>
  </div>
</div>

<!--  about ideas section ends -->

代码在这里和CodePen中都可以正常运行，，但是当我将相同的代码放在目标网页中时，会看到以下信息：

如您所见，第一个比其他人高一些。

知道什么问题吗？

Answer 1

问题在于svg图像的比例不同。因此，左侧的标题实际上是较短的，因此标题的排名不会比其他标题低。您必须给它们指定一个特定的高度，重新制作它们以使它们都具有相同的高度，否则必须考虑到大小的变化。