Равное разделение дочерних элементов div на родительский элемент div

Question

У меня проблемы с разделением трех дочерних элементов на родительский элемент фиксированного размера. Как видно на фотографии, я хочу разделить эти дочерние элементы div с равным размером внутри родительского элемента div. Пожалуйста, добавьте комментарий, если вы не поняли вопрос, но я опубликую фотографию внизу, чтобы у вас было понимание того, что я спрашиваю.

.qm {
  height: 60%;
  background: #fcfcfc;
  box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.4);
  border-radius: 20px;
  padding: 0 1rem;
  width: 18%;
  position: relative;
  overflow: hidden;
  justify-content: center;
}

.qmheading {
  background-color: lightblue;
}

.qmimage {
  background-color: lightcoral;
}

.qmparagraph {
  background-color: lightgreen;
}

<div class="qm">
  <div class="qmheading">
    <h1>
      Quality Management
    </h1>
  </div>
  <div class="qmimage">
    <img src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/beacon.svg" alt="">
  </div>
  <div class="qmparagraph">
    <p>
      ISO 9001 2015, <br> ISO 17025 & ISO 13485
    </p>
  </div>
</div>

Answer 1

Вот что я попробовал, прежде всего я добавил ширину и минимальную ширину к родительскому div. Во-вторых, я добавил фиксированную высоту, отступы и изгиб. Затем я добавил font-size и font-family в .gmparagraph при удалении тега p.

    h1 {
     	margin: 0px;
    }
    .qm {
        height: 60%;
        background: #fcfcfc;
        box-shadow: 5px 7px 18px rgba(0, 0, 0, 0.4);
        border-radius: 20px;
        padding: 0 1rem;
        width: 310px;
        min-width: 18%;
        position: relative;
        overflow: hidden;
        text-align: center;
    }
    .qm div{
        height: 120px;	
        padding: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .qmheading {
      	background-color: lightblue;
    }

    .qmimage {
      	background-color: lightcoral;
    }

    .qmparagraph {
        background-color: lightgreen;
        font-family: sans-serif;
    }

<div class="qm">
  <div class="qmheading">
    <h1>
      Quality Management
    </h1>
  </div>
  <div class="qmimage">
    <img width=120 src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/beacon.svg" alt="">
  </div>
  <div class="qmparagraph">
      ISO 9001 2015, <br> ISO 17025 & ISO 13485
  </div>
</div>

Answer 2

Одним из вариантов будет добавление фиксированной высоты, например, height: 20vh; к вашему дочернему элементу. Я выбрал высоту 20vh, потому что предположил, что высота вашего родительского div составляет 60% от высоты порта просмотра. Следовательно, 60vh / 3 = 20vh.