Как установить ширину контейнера, вычисляя ширину, если ее дочерние элементы

Question

У меня есть контейнер с n числом div внутри него. Мне нужен контейнер для изменения размера в соответствии с его детьми. Я знаю, что это можно сделать с помощью jquery-библиотеки следующим образом.

JQuery

$(document).ready(function(){ 
    setContainerWidth(); 
}); 

$(window).resize(function(){ 
    setContainerWidth(); 
}); 

function setContainerWidth() 
{ 
    $('.container').css('width', 'auto'); //reset 
    var windowWidth = $(document).width(); 
    var blockWidth = $('.block').outerWidth(true); 
    var maxBoxPerRow = Math.floor(windowWidth/blockWidth); 
    $('.container').width(maxBoxPerRow * blockWidth); 
} 

На этот раз мне нужно сделать это с чистым JavaScript для некоторых плагинов проблемы. Я сломал код до следующего и застрял в середине, любая помощь была бы оценена.

Javascript

function setContainerWidth(){ 
    var container_width = document.getElementById('container').offsetWidth; 
    var width = document.body.clientWidth 
    var block_width = document.getElementsByClassName("block").offsetWidth; 

    container.style.width = "auto" 
    var maxBoxPerRow = Math.floor(width/block_width) 
    container.offsetWidth(maxBoxPerRow * block_width) 
} 

Example one using jquery

Example two using javascript

Answer 1

У вас не хватает кое-что из вашего чистого яваскрипта перевод:

function setContainerWidth() 
{ 
    var container = document.getElementById('container'); 
    container.style.width = "auto"; 
    var window_width = window.innerWidth; 
    var block_width = document.getElementsByClassName("block")[0].offsetWidth; 
    var maxBoxPerRow = Math.floor(window_width/block_width); 
    container.style.width = (maxBoxPerRow * block_width) + 'px'; 
}