Html 容器匹配子对象和子对象宽度

我有一个容器，里面有很多孩子和孙子。我的目标是使容器的宽度与它的子代/子代匹配。（底部为CSS）

easy版本如下所示，一个具有一些子对象的父对象，其大小取决于子对象：

---

好了，我更新了你的小提琴

CSS

HTML

儿童1
儿童2
儿童3
儿童4
儿童1
儿童2
儿童3
儿童4
儿童5
儿童7
儿童8
儿童9
儿童10

我可以发誓，当我昨晚检查这个时，它工作了，但我现在正在查看，容器div的宽度是100%…所以你不想中断吗？不，我希望孩子们包装，但我希望容器的宽度与孩子们的宽度相匹配。现在它的宽度是到宽。

<div id="container">
    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 4</div>
</div>

<div id="container">

    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 4</div>

    <div id="child_container">
        <div class="child">child 1</div>
        <div class="child">child 2</div>
        <div class="child">child 3</div>
        <div class="child">child 4</div>
        <div class="child">child 5</div>
        <div class="child">child 7</div>
        <div class="child">child 8</div>
        <div class="child">child 9</div>
        <div class="child">child 10</div>
    </div>

</div>

#container {
    float: left;
    border: 1px solid blue;
    display: inline-block;
    padding: 5px; 
}

#child_container {
    float: left;
    border: 1px solid red;
    padding: 5px; 
}

.child {
    width: 100px;
    float: left;
    border: 1px solid black;
}

#container {
    float: left;
    border: 1px solid blue;
    display: inline;
    padding: 5px; 
}

#child_container {
    display: inline;
}

.child {
    width: 100px;
    float: left;
    border: 1px solid black;
    display: table-cell;
}

<div id="container">

    <div class="child">child 1</div>
    <div class="child">child 2</div>
    <div class="child">child 3</div>
    <div class="child">child 4</div>

    <div id="child_container">
        <div class="child">child 1</div>
        <div class="child">child 2</div>
        <div class="child">child 3</div>
        <div class="child">child 4</div>
        <div class="child">child 5</div>
        <div class="child">child 7</div>
        <div class="child">child 8</div>
        <div class="child">child 9</div>
        <div class="child">child 10</div>
    </div>

</div>