如何使内部元素适合父级

【问题标题】：How to make inner element fit within parent如何使内部元素适合父级
【发布时间】：2017-02-11 17:07:02
【问题描述】：

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

页面元素最终看起来像这样，并且在我调整大小时宽度是固定的。

【问题讨论】：

标签： html css reactjs sass

【解决方案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>

【讨论】：