javascript - MD卡内有两个高度相同的图表

Question

我在 md-cards 容器( Angular Material )内有两个图表。它们都具有 flex='33' 的 flex 属性，这意味着它们具有相同的宽度。但是，我希望它们也具有相同的高度。

我现在的代码:

html:

<div id="surveyStats" layout="row" layout-wrap layout-align="center center">
    <md-card flex="33">
      <md-card-title>
        <md-card-title-text>
          <h4>Examples Collected For Each Intent</h4>
          <canvas id="examplesIntent"></canvas>
        </md-card-title-text>
      </md-card-title>
    </md-card>
    <md-card flex="33">
      <md-card-title>
        <md-card-title-text>
          <h4>Intents Covered in Survey</h4>
          <div class="intent-result">
            <div id="intentsCovered" layout="row" layout-align="center center"></div>
          </div>
        </md-card-title-text>
      </md-card-title>
    </md-card>
  </div>

CSS:

#surveyStats {
  margin-top: 5%;
}

.intent-result{
  margin: auto;
  position: relative;
}

我还添加了这两个图表的屏幕截图。有人可以告诉我如何将它们设置为相同的高度(如果不在 px 中这样做，我更喜欢类似于 flex='33' 选项的方法。)

Answer 1

无法真正重现此内容，但请尝试

#surveyStats {
  margin-top: 5%;
  display: flex;
}