如何设置一个元素，使其使用父元素的剩余高度，同时拥有其他2个动态元素？

<div class="parent">
  <div class="dynamic-element1">动态元素1</div>
  <div class="dynamic-element2">动态元素2</div>
  <div class="remaining-height">剩余高度元素</div>
</div>

.parent {
  display: flex;
  flex-direction: column;
  height: 100%; /* 设置父元素高度为100%，这样子元素可以继承父元素的高度 */
}

.dynamic-element1 {
  flex: 1; /* 使用flex属性使元素占据剩余空间 */
}

.dynamic-element2 {
  flex: 1; /* 使用flex属性使元素占据剩余空间 */
}

.remaining-height {
  flex: 1; /* 使用flex属性使元素占据剩余空间 */
}