Эффект "слайдера" JS

Работаю над горизонтальным слайдером (плавное появление одного div внутри другого), но что-то делаю не так, виджет, что должен появляться - появляется, но делает за пределами div.

HTML:

<div id="blog">
   <div id="log_view"></div>
   <div id="main_func"></div>
</div>

CSS:

#blog {
    display: flex;
    position: relative;
    width: 49%;
    text-align: center;
    align-items: end;
}

#main_func {
    width: 100%;
    height: 100%;
    padding: 10px;
    padding-right: 0px;
}

#log_view {
    background: #fff;
    display: none;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    border: 1px solid #000;
}

@keyframes call_logs_key {
    0% {transform: translateX(150%);}
    100% {transform: translateY(0);}
  }

JS:

const btn = document.getElementById('call_help-block__log_view_button');
const boxLogs = document.getElementById('call_help-block__log_view_block');
const mainFunc = document.getElementById('call_help-block__main_func_block');

btn.onclick = function() {
    boxLogs.style.display = 'flex';
    boxLogs.style.transform = 'translateX(150%)';
    boxLogs.style.animation = 'call_logs_key 1s forwards';
    mainFunc.style.display = 'none';
}