как установить родительскую прокрутку, когда дети добавляются динамически

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>

Answer 2

хорошо работает после добавления пропущенного ";" здесь:

фон: серебро;

также, свитку нужна высота ... поэтому добавьте высоту, чтобы он работал.

Answer 3

Просто измените свойства .wrap, как показано ниже, и добавьте min-width

.wrap{
  position:fixed;
    left:50%;
    top:54px;
    transform:translateX(-50%);
    max-height:calc(100vh - 108px);
  background:silver
  overflow:auto;
  min-height: 300px /* or whatsoever you want to make the height of container stable when minimum content is there */
}