使用 !important 覆盖内联 CSS 不起作用

Question

Link to image visualizing my problem

我试图覆盖图片中突出显示的内联样式。我试过使用 CSS !important 如下：

1)

group.buttonizer-group-0-0-1 [style]{
display:flex !important;
}

2. group.buttonizer-group-0-0-1 div[样式]{ 显示：弹性！重要； }

3. group.buttonizer-group-0-0-1 { 显示：弹性！重要； }

不幸的是，上述选项均无效。是否有任何其他 CSS 或 JS 代码片段我可以尝试将此元素的 display:block 更改为 display:flex？

编辑

我尝试遵循在按钮正确定位的意义上起作用的 CSS：

div[id^="gb-widget"], .buttonizer-group-0-0-1{
  display:flex !important;
}

然而，那个 CSS 覆盖了我的 JS：

jQuery(document).ready(function($){
    // This is a little hack: Wait until the menu button exists and then hide it
    var checkExist = setInterval(function() {
        if ($(".buttonizer-group-0-0-1").length) {
            $(".buttonizer-group-0-0-1").hide();
            clearInterval(checkExist);
        }
    }, 10);
  
    // Check the scroll status of the window and fade in the menu button accordingly
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 850) {
              $(".buttonizer-group-0-0-1").fadeIn();
            } else {
              $(".buttonizer-group-0-0-1").fadeOut();
            }
        });
    });

});