Angular2中基于另一个元素设置元素高度

我来帮你搞定这个需求～核心思路是借助Flex布局让两个容器高度自动同步，再通过max-height和overflow属性来控制滚动逻辑，完全符合你要的「优先以输入容器高度为准」的要求：

• 当右侧输入容器的自然高度不足600px时，左侧数字容器会自动匹配它的高度
• 当右侧输入容器高度达到600px时，左侧数字容器也会固定为600px，此时如果左侧数字内容超出这个高度，就会开启独立滚动

完整代码示例 #

<section>
  <div class="numbers">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
  </div>
  <div class="inputs">
    <input type="text" placeholder="输入框1">
    <input type="text" placeholder="输入框2">
    <input type="text" placeholder="输入框3">
    <input type="text" placeholder="输入框4">
    <input type="text" placeholder="输入框5">
    <input type="text" placeholder="输入框6">
    <input type="text" placeholder="输入框7">
    <input type="text" placeholder="输入框8">
    <input type="text" placeholder="输入框9">
    <input type="text" placeholder="输入框10">
    <input type="text" placeholder="输入框11">
    <input type="text" placeholder="输入框12">
    <input type="text" placeholder="输入框13">
    <input type="text" placeholder="输入框14">
    <input type="text" placeholder="输入框15">
  </div>
</section>

section {
  display: flex;
  align-items: stretch; /* 强制两个子容器高度同步，默认就是这个值，显式写出来更清晰 */
}

.numbers {
  margin-right: 50px;
  max-height: 600px; /* 最大高度限制为600px */
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
  /* 可选：美化滚动条 */
  scrollbar-width: thin;
}

.numbers div {
  background: black;
  height: 20px;
  width: 20px;
  margin-bottom: 10px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inputs {
  display: flex;
  flex-direction: column;
  max-height: 600px; /* 输入容器最大高度600px，避免无限增高 */
  overflow-y: auto; /* 可选：如果输入框太多，右侧也可以滚动，不需要的话可以删掉 */
}

input {
  margin-bottom: 20px;
  padding: 8px;
}

关键逻辑说明 #

1. Flex布局同步高度：section设置为display: flex，默认的align-items: stretch会让.numbers和.inputs两个容器的高度始终保持一致，完美实现「以输入容器高度为准」的要求。
2. 最大高度限制：给两个容器都设置max-height: 600px，确保当输入容器内容足够多、高度达到600px时，不会继续增高，同时左侧数字容器也会被限制在600px。
3. 左侧独立滚动：给.numbers添加overflow-y: auto，当数字内容的总高度超过600px时，会自动出现垂直滚动条，而右侧输入容器的滚动逻辑可以根据需求选择是否开启（代码里是可选的）。

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