如何让div容器随内容自动增高？（仿Google Keep笔记页）

我正在制作类似Google Keep的笔记网页，尝试将容器的height设为auto，但容器仍不能随内容增加自动增高。设置height: auto后容器高度固定，内容溢出；想要实现的效果是容器能根据内容多少自动调整高度。

我的CSS代码如下：

.note {
    position: relative;
    display: inline-block;
    background: #82589F;
    border-radius: 7px;
    padding: 10px;
    width: 300px;
    height: auto;
    overflow: visible;
    height: fit-content;
    margin: 16px;
    top: 2rem;
    left: 2rem;
  }
  .note h1 {
    font-size: 1.1em;
    margin-bottom: 6px;
  }
  .note p {
    position: absolute;
    top: 3rem;
    font-size: 20px;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #A3A3A3;
  }


  .note button {
    position: absolute;
    border: none;
    height: 0px;
    bottom: 1rem;
    right: 0;
    cursor: pointer;
    outline: none;
  }

问题原因 #

核心问题是.note p和.note button使用了position: absolute，绝对定位的元素会脱离文档流，不会占用容器的空间，导致容器无法感知到它们的高度，因此无法自动增高。

解决方案 #

方案1：移除绝对定位，让元素回到文档流

移除段落的绝对定位属性，按钮改用浮动布局：

.note {
    position: relative;
    display: inline-block;
    background: #82589F;
    border-radius: 7px;
    padding: 10px;
    width: 300px;
    height: auto;
    margin: 16px;
    top: 2rem;
    left: 2rem;
}
.note h1 {
    font-size: 1.1em;
    margin-bottom: 6px;
}
.note p {
    font-size: 20px;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #A3A3A3;
    margin: 0 0 10px 0;
}

.note button {
    border: none;
    cursor: pointer;
    outline: none;
    float: right;
}

方案2：用Flex布局固定按钮在底部

如果需要按钮始终在容器右下角，可改用Flex布局：

.note {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    background: #82589F;
    border-radius: 7px;
    padding: 10px;
    width: 300px;
    margin: 16px;
    top: 2rem;
    left: 2rem;
}
.note h1 {
    font-size: 1.1em;
    margin-bottom: 6px;
}
.note p {
    flex: 1;
    font-size: 20px;
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #A3A3A3;
    margin: 0 0 10px 0;
}

.note button {
    border: none;
    cursor: pointer;
    outline: none;
    align-self: flex-end;
}

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