如何在列中制作绝对位置的元素，以弹性布局填充父容器的高度？

Question

我确实有问题（flex）布局。我确实有一个父装容器。内部有两个列，左列＃1包含绝对定位的对象，右列＃2包含文本。 我希望将第一列带有绝对位置的对象来定义最小高度。因此，当添加新对象时，父容器的高度应自动增加。

我尝试了一切，但没有找到解决方案。最好的方法是什么？

感谢您的帮助。

您必须使用JavaScript，因为当将要素放置在绝对的位置时，它们不会影响父母，就好像它们被从文件流中删除一样。 there是使用的功能

Answer 1

function adjustHeight() {
  var column = document.querySelector(".column");
  var children = document.querySelectorAll(".column .child");
  var maxHeight = 0;
  children.forEach(function(child) {
    const rect = child.getBoundingClientRect();
    if (rect.bottom > maxHeight) {
      maxHeight = rect.bottom
    }
  })
  column.style.height = maxHeight + "px"
}



adjustHeight()

.column {
  border: 1px solid red;
  position: relative;
  /* or not */
}

.child {
  position: absolute;
  top: 20px;
  left: 50px;
  width: 40px;
  height: 40px;
  background: green;
}

.child.child2 {
  top: 70px;
  background: yellow;
}

<div class="column">
  <div class="child"></div>
  <div class="child child2"></div>
</div>