如何在HTML中结合固有与特定尺寸元素，保留Footer高度自适应

现有一个300×300px的wrapper容器，底部包含Footer区域。Footer的高度由绿色可编辑框的内容决定，在绿色框输入内容时，Footer会和红色框一同增高。勾选复选框后，红色框内会显示大型麦克风图标，但目前图标会改变Footer的高度，需要实现图标不改变Footer高度，同时保留Footer随绿色框内容扩展的能力。

原代码如下：

HTML #

<div class="wrapper">
  <div class="footer">
    <div class="child1">
      <div contentEditable></div>
    </div>
    <div class="child2" contentEditable>
      <img src="microphone.svg" id="img" style="display: none;">
    </div>
  </div>
</div>

<input type="checkbox" id="checkbox">

CSS #

.wrapper {
  height: 300px;
  width: 300px;
  outline: solid;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: 3em;
}

.footer {
  width: 100%;
  height: min-content;
  outline: solid pink;
  display: flex;
}

.child1 {
  width: min-content;
  height: min-content;
}

.child1>div {
  width: 100px;
  min-height: 80px;
  background-color: green;
}

.child2 {
  flex-basis: 100%;
  flex-shrink: 1;
  flex-grow: 0;
  height: 100%;
  background-color: red;
  
  display: flex;
  justify-content: center;
  overflow-x: clip;
}

.child2>img {
  height: 95%;
}

JS #

let img = document.getElementById("img");
img.src = "https://www.svgrepo.com/show/117819/microphone.svg"

document.getElementById("checkbox").onchange = (event) => {
  if (event.target.checked) {
    img.style = "display: block;"
  } else {
    img.style = "display: none;"
  }
}

核心是让麦克风图标脱离文档流，不参与Footer高度的计算，同时保证红色框高度始终跟随绿色框变化。具体修改：

• 给.child2添加position: relative，作为图标绝对定位的参考容器
• 将图标设置为position: absolute，通过transform实现居中，避免影响容器高度
• 用max-height和max-width限制图标大小，防止超出红色框范围

修改后的完整代码：

HTML #

<div class="wrapper">
  <div class="footer">
    <div class="child1">
      <div contentEditable></div>
    </div>
    <div class="child2" contentEditable>
      <img src="https://www.svgrepo.com/show/117819/microphone.svg" id="img" style="display: none;">
    </div>
  </div>
</div>

<input type="checkbox" id="checkbox">

CSS #

.wrapper {
  height: 300px;
  width: 300px;
  outline: solid;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: 3em;
}

.footer {
  width: 100%;
  height: min-content;
  outline: solid pink;
  display: flex;
}

.child1 {
  width: min-content;
  height: min-content;
}

.child1>div {
  width: 100px;
  min-height: 80px;
  background-color: green;
}

.child2 {
  flex-basis: 100%;
  flex-shrink: 1;
  flex-grow: 0;
  height: 100%;
  background-color: red;
  display: flex;
  justify-content: center;
  overflow-x: clip;
  position: relative; /* 设置相对定位作为参考 */
}

.child2>img {
  position: absolute; /* 脱离文档流 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 居中对齐 */
  max-height: 95%; /* 不超出容器高度 */
  max-width: 95%; /* 不超出容器宽度 */
}

JS #

let img = document.getElementById("img");

document.getElementById("checkbox").onchange = (event) => {
  img.style.display = event.target.checked ? "block" : "none";
}

内容的提问来源于stack exchange，提问作者Alexey_Chebotarev