Width does not work in certain screen size

Question

I made a sidebar on my site, and its width is changed by javascript when you press a button, and everything works fine, but if I decrease the screen size to a certain point the width stops working, even if I change the value in inspect element.

NOTE: The button that activates the function exists, but is not in this code.

<div id="sidebar_base">
        <div id="sidebar">
        </div>
</div> 

div#sidebar {
    width: 50px;
    height: 100%;

    position: fixed;

    background-color: rgba(79, 79, 79, 1);

    transition: width 0.4s;
}

span#sidebar_base {
    width: 50px;
    height: 100%;
    min-width: 50px;

    background-color: rgba(79, 79, 79, 1);

    transition: width 0.4s;
}

        function sidebarAnimation() {
            var sidebar = document.getElementById("sidebar");
            var sidebar_base = document.getElementById("sidebar_base");

            if(order) {
                sidebar.style.width="150px";
                sidebar_base.style.width="150px";
                
                order = false;
            } else {
                sidebar.style.width="50px";
                sidebar_base.style.width="50px";

                order = true;
            }
        }

Answer 1

You can try this in a different way: You can create a new class with the width of 150px and by clicking the button, add it to the element.

CSS:

   .large {
      width: 150px;
   }

JS:

   function sidebarAnimation() {
        var sidebar = document.getElementById("sidebar");
        var sidebar_base = document.getElementById("sidebar_base");

        if(order) {
            sidebar.classList.add("large");
            sidebar_base.classList.add("large");
            
            order = false;
        } else {
            sidebar.classList.remove("large");
            sidebar_base.classList.remove("large");

            order = true;
        }
    }