如何使内部元素适合父元素

Question

我似乎无法找到一种方法来使内部元素与其父元素匹配/调整大小。当前代码如下：

页面元素看起来像这样，并在调整大小时固定宽度。

Answer 1

您可以将position: absolute用于孩子，position: relative（不要忘记）父。

There is多个解决方案，但我正在使用上述技术

例如：

.parent {
  position: relative;
  background-color: #d3d3d3;
  border: 1px solid black;
  width: 300px;
  height: 100px;
}

.child {
  position: absolute;
  top: 5%;
  left: 5%;
  background-color: red;
  border: 5px solid green;
  box-sizing: border-box;
  width: 90%;
  height: 90%;
}

<div class="parent">
  <div class="child">
  </div>
</div>