css - 複数列 (列幅を使用) の記事のコンテナーの背景を設定できません

Question

Windows 8 用の JavaScript ベースの Metro アプリを開発しています。複数列の記事を持つコンテナーの背景を設定しようとしています。基本的に、左側にリストビュー、右側に複数列の記事があります (分割ビューに似ています)。

記事のフローを水平 (CSS プロパティの column-width を使用して複数列) に設定しようとしていますが、記事の背景を設定すると、ビューポートの端までしか設定されません。

分割アプリ テンプレートを使用して新しいプロジェクトを作成し、 split.htmlで次の HTML を現在の HTML ( body タグ内) に置き換えます。

<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
    <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
    <div class="item-info">
        <h3 class="item-title win-type-ellipsis" data-win-bind="textContent: title"></h3>
        <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
        <h4 class="item-description" data-win-bind="textContent: description"></h4>
    </div>
</div>

<!-- The content that will be loaded and displayed. -->
<div class="my-page fragment">
    <header aria-label="Header content" role="banner">
        <button class="win-backbutton" aria-label="Back" disabled></button>
        <h1 class="titlearea win-type-ellipsis">
            <span class="pagetitle"></span>  
        </h1>
    </header>
    <div class="itemlist-section" aria-label="List column">
        <div class="itemlist" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'single', tapBehavior: 'toggleSelect' }"></div>
    </div>
    <div class="articlesection" aria-atomic="true" aria-label="Item detail column" aria-live="assertive">
        <div class="text">
            <div class="title win-type-ellipsis" data-win-bind="textContent: title"></div>
        </div>

        <div class='article'>
            <img class="article-image" src="#" data-win-bind="src: imageUrl; alt: title" />
            <div class="article-content" data-win-bind="innerHTML: content"></div>
        </div>
    </div>
</div>

split.css ファイルの内容を次の内容に置き換えます。

.my-page {
   -ms-grid-columns: 456px 1fr;
   display: -ms-grid;
   width: 100%;
   overflow-x:auto;
}
.my-page .itemlist-section {
   -ms-grid-row: 2;
   margin-left: 106px;
   margin-right:10px;
}
.my-page .itemlist-section .itemlist .win-item {
   height:120px;
}
.my-page .articlesection {
   -ms-grid-column: 2;
   display:-ms-grid;
   -ms-grid-rows:80px 1fr;
   -ms-grid-row: 2;
   margin-left: 0px;
   height: 600px;
   width:auto;
   background-color:rgba(254, 247, 235, 0.6);
   padding:30px 50px 25px 50px;
}
.my-page .articlesection .article {
   -ms-grid-row:2;
   display:-ms-grid;
   -ms-grid-columns:auto auto;
}
.my-page .articlesection .title {
   -ms-grid-row:1;
   margin-bottom:-5px;
   font-size:37px;
   color:#333333;
}
.my-page .articlesection .article .article-image {
   -ms-grid-row:2;
   -ms-grid-column:1;
   margin-right:30px;
}
.my-page .articlesection .article-content {
   -ms-grid-row:2;
   -ms-grid-column:2;
   column-fill: auto;
   column-gap: 30px;
   column-width: 270px;
   height:550px;
   width:auto;
} 

アプリを実行し、ハブの任意のタイルをクリックして、split.html を表示します。右にスクロールして、背景色の記事が適切でないことに注意してください。