Wie lässt man Kinder in Side-by-Side-Elementen schweben, in einem festen Container?

Question

Ich habe die Situation:

html:

<div class="container0"> 
    <div class="item"> 
    <div class="subitens"> 
     <div class="child"></div> 
     <div class="child"></div> 
     <div class="child"></div> 
    </div> 
    </div> 
    <div class="item"> 
    <div class="subitens"> 
     <div class="child"></div> 
     <div class="child"></div> 
     <div class="child"></div> 
     <div class="child"></div> 
    </div> 
    <div> 
<div> 

css:

.container0 { 
    width:600px; /*needed*/ 
} 

.item { 
    border: solid; 
    background: yellow; 
    float: left; 
    position: relative; 
    width: auto; /*needed, should be width of the contents*/ 
} 

.subitens { 
    background: red; 
    padding: 10px; 
} 
.child { 
    background: blue; 
    border: solid; 
    width: 100px; /*needed*/ 
    height: 100px; /*needed*/ 
    float: left; 
} 

http://jsfiddle.net/tombrito/gx7kL330/6/

Und ich möchte die .item Elemente nebeneinander sein , w hile die .child Elemente würden schweben, um in den Raum (600px) zu passen. Irgendeine Idee?

Answer 1

Ist es so etwas, wonach Sie suchen?

.container0 { 
 
    width:600px; /*needed*/ 
 
    display: flex; 
 
} 
 

 
.item { 
 
    display: flex; 
 
    flex: 1; 
 
    border: solid; 
 
    background: yellow; 
 
} 
 

 
.subitens { 
 
    display: flex; 
 
    flex: 1; 
 
    background: red; 
 
    padding: 10px; 
 
} 
 
.child { 
 
    flex: 1; 
 
    border: solid; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.child { 
 
    background: blue; 
 
}

<div class="container0"> 
 
    <div class="item"> 
 
    <div class="subitens"> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
    </div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="subitens"> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
    </div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="subitens"> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
    </div> 
 
    </div> 
 
<div>

Hier ist meine erste Probe, nicht flex, die eigentlich so gut funktioniert, weil die child Elemente haben eine feste width

.container0 { 
 
    width:600px; /*needed*/ 
 
    white-space: nowrap; 
 
} 
 
.item { 
 
    border: solid; 
 
    background: yellow; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    position: relative; 
 
    box-sizing: border-box; 
 
} 
 
.subitens { 
 
    background: red; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
} 
 
.child { 
 
    border: solid; 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
    box-sizing: border-box; 
 
} 
 
.child { 
 
    background: blue; 
 
}

<div class="container0"> 
 
    <div class="item"> 
 
    <div class="subitens"> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
    </div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="subitens"> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
    </div> 
 
    </div> 
 
    <div class="item"> 
 
    <div class="subitens"> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
     <div class="child"></div> 
 
    </div> 
 
    </div> 
 
<div>