外层有一个自适应高度的div，里面有两个div，一个高度固定300px，另一个怎么填满剩余的高度？

为了解决这个问题，你可以使用 CSS 的 Flexbox 布局。下面是一个简单的示例，展示了如何创建一个自适应高度的外层 div，其中包含一个高度为 300px 的 div 和另一个填充剩余高度的 div。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fill Remaining Height Example</title>
<style>
  .outer-div {
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 子元素垂直排列 */
    height: 100vh; /* 外层 div 高度设置为视口的 100%，你也可以根据需要设置为其他值 */
  }

  .fixed-height-div {
    height: 300px; /* 固定高度为 300px */
    background-color: lightblue; /* 为了可视化效果，设置背景颜色 */
  }

  .remaining-height-div {
    flex: 1; /* 填充剩余空间 */
    background-color: lightgreen; /* 为了可视化效果，设置背景颜色 */
  }
</style>
</head>
<body>
<div class="outer-div">
  <div class="fixed-height-div">Fixed Height Div (300px)</div>
  <div class="remaining-height-div">Remaining Height Div</div>
</div>
</body>
</html>

在这个示例中，.outer-div 是外层容器，它使用了 Flexbox 布局（display: flex）并且设置了 flex-direction: column 以使子元素垂直排列。外层容器的高度被设置为视口的 100%（height: 100vh），但你可以根据需要调整这个值。

.fixed-height-div 是具有固定高度（300px）的内部 div，而 .remaining-height-div 是另一个内部 div，它使用 flex: 1 属性来填充剩余的空间。flex: 1 告诉 Flexbox 让这个元素占据所有可用的额外空间。