Javascript-форум - ScrollIntoView. Неужто не придумали решения победить странное поведение

Вот модельный код

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
 #main {
   position:relative;
   width: 300px;
   height: 300px;
   border: 1px solid black;
   overflow-y: auto;
 }

#ucont {
    position:relative
}

#open {
    position:relative;
	height: 120px;
	margin:10px 20px;
	border: 1px solid red;
	overflow-y: auto;
}

#bscr {
    position: sticky;
    top: 0;
    float: right;
    z-index: 10;
}

#elem {
    color: red;
}
</style>
<script>
</script>
</head>
<body> 
<div id="main">
  <div id="ucont">
    <ul>
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
            <div id='open'>
             <button id= bscr>Scroll</button>
           text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text <span id='elem'> elem elem </span>text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
            text text text text <br>
           </div>
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item
        <li> item item item

    </ul>
  </div>
</div>

<script>
const bt = document.getElementById('bscr')
const main = document.getElementById('main')
const el = document.getElementById('elem')

bt.addEventListener('click', () => {
    const st = main.scrollTop;
    el.scrollIntoView({block: "center" , behavior: "smooth"})
    //main.scrollTop = st  // работает без  behavior: "smooth"
    
})
</script>

</body>
</html>

Можно ли что то сделать, что бы #elem прокручивался до центра только своего родительского блока, его родительский блок не прокручивался внутри своего родителя?
Без behavior: "smooth" помогает тупое шаманство с scrollTop.
А как с плавной прокруткой быть?
Моно, конечно и по setTimeout возвращать блок на место, но зрительно эти прыжки туда сюда еще отвратнее.
Или только остается самому рассчитывать на сколько прокрутить и плавно прокручивать?