[CSS] Element met breedte van children

[posttoast]

Wat ik wil is eenvoudig op te lossen met javascript, maar ik vroeg me af of het ook met enkel CSS mogelijk is. Ik heb deze opzet:

HTML:

<div class="container">
  <div class="parent">
    <div class="child">Hopla</div>
    <div class="child">Hopla</div>
    <div class="child">Hopla</div>
    <div class="child">Hopla</div>
    <div class="child">Hopla</div>
  </div>
</div>

De bedoeling is dat de children naast elkaar floaten. div.container heeft een vaste breedte en een verborgen x-overflow. div.parent moet minimaal de breedte van alle children (plus de bijbehorende margins) hebben, en hij heeft een automatische x-overflow.

Ik wil namelijk dat je horizontaal kunt scrollen (met touch) door de elementen. Ik gebruik daarvoor de volgende CSS:

Cascading Stylesheet:

.container{
  position: relative;
  width: 500px;
  overflow-x: hidden;
}

.parent{
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 5000px;
}

.child{
  position: relative;
  width: 250px;
  float: left;
}

Het probleem zit hem dus in de width van die parent. Als ik die op 5000px zet gaat het goed, maar dat is natuurlijk veel te breed. Hoe kan ik ervoor zorgen dat hij automatisch de breedte van zijn content aanneemt (zonder die met javascript te berekenen)?

Nog ter extra illustratie, op Stack Overflow kwam ik een stukje ASCII art tegen dat omschrijft wat ik wil. Helaas daar geen goed antwoord:

code:

+------ container -------+
+------ child_container -+----+
| child1 child2 child3 child4 |
+------------------------+----+

[crisp]

geen float gebruiken maar inline-block ism white-space: nowrap?

[posttoast]

Haha, was alles maar zo simpel. Stom dat ik hier zelf niet aan gedacht heb, het werkt perfect. Bedankt crisp