javascript - 动态添加子项时如何设置父项可滚动

Question

点击按钮几次

为什么.wrap - max-height不起作用

我希望它受到 100vh - 108px 的限制，并且 .ins 在需要时可以滚动。

有什么帮助吗？

$('button').on('click', function(){
  let a = "<div class='abc'>ABC</div>";
  $(a).appendTo($('#ins'));
});

.wrap{
  position:fixed;
	left:50%;
	top:54px;
	transform:translateX(-50%);
	max-height:calc(100vh - 108px);
  background:silver;
  overflow:hidden;
}
.title{background:gold;}
.bottom{margin-top:5px;}
.sub{background:orange;}
.ins{overflow-y:scroll;}
.abc{background:lightgreen;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<div class='wrap'>
<div class='title'>LOREM</div>
<div class='bottom'>
<div class='sub'>IPSUM</div>
<div class='ins' id='ins'>
<div class='abc'>ABC</div>
</div>
</div>
</div>

Answer 1

将 .ins 更改为如下所示

    $('button').on('click', function(){
    let a = "<div class='abc'>ABC</div>";
    $(a).appendTo($('#ins'));
  });

.wrap{
  position:fixed;
  left:50%;
  top:54px;
  transform:translateX(-50%);
  max-height:calc(100vh - 108px);
  background:silver;
  overflow:hidden;
}
.ins {
overflow-y: auto;
max-height: calc(100vh - 108px);
}
.title{background:gold;}
.bottom{margin-top:5px;}
.sub{background:orange;}
.abc{background:lightgreen;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <button>CLICK</button>
    <div class='wrap'>
    <div class='title'>LOREM</div>
    <div class='bottom'>
    <div class='sub'>IPSUM</div>
    <div class='ins' id='ins'>
    <div class='abc'>ABC</div>
    </div>
    </div>
    </div>