Javascript 设置div的宽度取决于图像的x宽度

我试图使我的div的宽度扩展到内容的px。atm这是我所拥有的：

<div class="col-sm-12">
<div class="GameItemsImage">
    <div class="test">
        <img src="~/img/cd-logo.svg" />
        <img src="~/img/cd-logo.svg" />
        <img src="~/img/cd-logo.svg" />
        <img src="~/img/cd-logo.svg" />
        <img src="~/img/cd-logo.svg" />
        <img src="~/img/cd-logo.svg" />
        <img src="~/img/cd-logo.svg" />
        <img src="~/img/cd-logo.svg" />
        <img src="~/img/cd-logo.svg" />
        <img src="~/img/cd-logo.svg" />
        <img src="~/img/cd-logo.svg" />
    </div>
</div>

但这是静态的，我希望它是动态的，这样当一个新项目被放入div时，它会自动消耗。我该怎么做

.GameItemsImage{
背景色：#3E454C；
宽度：100%；/*（无需添加/设置高度）*/
溢出x：滚动
}
.测试{
空白：nowrap；/*水平延伸内联/内联块元素*/
字体大小：0；/*删除4px内联间距*/
}
/*您使用图像，但对于文本子元素，您希望重置字体大小：1rem*/


.GameItemsImage{
背景色：#3E454C；
宽度：100%；/*（无需添加/设置高度）*/
溢出x：滚动
}
.测试{
空白：nowrap；/*水平延伸内联/内联块元素*/
字体大小：0；/*删除4px内联间距*/
}
/*您使用图像，但对于文本子元素，您希望重置字体大小：1rem*/

对于动态函数，必须使用JavaScript（jQuery）。读取新div的宽度并使用css将属性设置为parent。@JoelGeiser我知道我需要使用jquery。但是我不知道从哪里开始，你能给我一个开头吗，从哪里开始对于动态函数，必须使用JavaScript（jQuery）。读取新div的宽度并使用css将属性设置为parent。@JoelGeiser我知道我需要使用jquery。但是我不知道从哪里开始，你能给我一个开头吗，从哪里开始这样地？当它变为100%宽度时，它只是打断图像
.GameItemsImage{背景色：#3E454C；宽度：100%；高度：150px；溢出-x:scroll}。测试img{float:left；}。测试{溢出：auto；}
非常有效，谢谢！但是，使用Jquery不是更好吗？还是当我不能使用css时，我只使用Jquery？就像这样？当它变为100%宽度时，它只是打断图像
.GameItemsImage{背景色：#3E454C；宽度：100%；高度：150px；溢出-x:scroll}。测试img{float:left；}。测试{溢出：auto；}
非常有效，谢谢！但是使用Jquery不是更好吗？或者当我不能使用css时，我只使用Jquery不是更好吗？
.GameItemsImage {
    background-color: #3E454C;
    width: 100%;
    height: 150px;
    overflow-x: scroll
}

.test {
    width: 200%;
}