How to fix these responsive columns?

Question

css

I put two adaptive blocks on the site, in one of which I placed the VK block, in the other a third-party module. For some reason, VK refuses to adapt to the block, how to fix it?

<div id="columns">
    
    <div><script type="text/javascript" src="//vk.com/js/api/openapi.js?121"></script>
    <!-- VK Widget -->
  <div id="vk_groups"></div>
  <script type="text/javascript">
    VK.Widgets.Group("vk_groups", {mode: 2, wide: 1, width: "auto", height: "400"}, 65273602);
  </script></div>
  
  <div>
    {include file="/engine/modules/moonserials_block.php"}
  </div>
</div>

#vk_groups,
#vk_groups iframe {
     width: 100% !important;
}

#columns {
    display: table;
    width: 100%;
    box-sizing: border-box; 
    margin-left: 0;
    margin-right: 0;
}

#columns > div {
    display: table-cell;
    vertical-align: top;
    width: auto;
    box-sizing: border-box;  /* не поддерживается в CSS2 */
}

Answer 1

The VK widget is a headache. The easiest way is to write js, take the size of the parent div and explicitly assign it to the widget. then load the widget
yet I suspect your #columns > div is not stretchable.

Answer 2

<div>
    
    <div><script type="text/javascript" src="//vk.com/js/api/openapi.js?121"></script>
    <!-- VK Widget -->
  <div id="vk_groups"></div>
  <script type="text/javascript">
    VK.Widgets.Group("vk_groups", {mode: 2, wide: 1, width: "auto", height: "400"}, 65273602);
  </script></div>
  
  <div id="columns">
    {include file="/engine/modules/moonserials_block.php"}
  </div>
</div>

and specify the dimensions for VK in {mode: 2, wide: 1, width: "auto", height: "400"}