html - Div 宽度/高度 另一个 div 内可用空间的 100%

Question

#external
{
  background-color: #585858;
  width: 200px;
  height: 200px;
}
#internal
{
  background-color: #111858;
  width: 50px;
  height: 100%;
}

<div id="external">
  content 1
  <div id="internal"></div>
</div>

在这种情况下，如何设置外部div的剩余高度到内部div？ 问题是当我将 100% 高度设置为内部 div 时，所以内部高度 == 外部高度。

Answer 1

您的要求有点不清楚，但 flexbox 可以满足我认为您的需求。

p {
  margin: 0;
}
.external {
  background-color: rgba(255, 0, 0, 0.5);
  width: 200px;
  height: 200px;
  display: inline-flex;
  flex-direction: column;
  margin: 10px;
}
.internal {
  background-color: #111858;
  100%;
  flex: 1;
}

<div class="external">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <div class="internal"></div>
</div>
<div class="external">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo harum quia tempore! Sit, laboriosam, quam.</p>
  <div class="internal"></div>
</div>