Define a multi-column, horizontally scrolling article Inside a hub Template

Question

Hello,

I am trying to define a multi-column, horizontally scrolling article Inside a hub Template. For exemple, if I take the hub Template available in VS2013 and change the first section (with the horizontal scrollbar), I get that :

The html is simple, I have just added more data and an article element in the section1 of the hub control:

<div class="section1" data-win-control="WinJS.UI.HubSection" data-win-options="{ isHeaderStatic: true }" data-win-res="{ winControl: {'header': 'Section1'} }">
    <article>
        <img src="/images/gray.png" width="420" height="280" />
        <div class="subtext win-type-x-large" data-win-res="{ textContent: 'Section1Subtext' }"></div>
        <div class="win-type-medium" data-win-res="{ textContent: 'DescriptionText' }"></div>
        <div class="win-type-small">
            <span data-win-res="{ textContent: 'Section1Description' }"></span>
            <span data-win-res="{ textContent: 'Section1Description' }"></span>
            <span data-win-res="{ textContent: 'Section1Description' }"></span>
            <span data-win-res="{ textContent: 'Section2Description' }"></span>
            <span data-win-res="{ textContent: 'Section2Description' }"></span>
            <span data-win-res="{ textContent: 'Section2Description' }"></span>
            <span data-win-res="{ textContent: 'Section2Description' }"></span>
            <span data-win-res="{ textContent: 'Section2Description' }"></span>
            <span data-win-res="{ textContent: 'Section2Description' }"></span>
        </div>
    </article>
</div>

In the CSS file I've only added a style for the article with a multi column layout:

.hubpage .hub .section1 article {
    column-fill: auto;
    column-gap: 80px;
    column-width: 480px;
    height: calc(100% - 50px);
    margin-top: 5px;
    column-count: auto;
    display: block;
}

The problem is that I would like the width of container (the hub section) fits the width of the article (and remove the horizontal scollbar). In short, a auto width layout for the hub section.

In the CSS of the Template we can find a style for the section:

.hubpage .hub .section1 {
    width: 420px;
}

But changing the width property (auto, 100%, etc.) does not provide the expected result.

Any idea ?

Thanks.