Outer Div die Breite des Inhalts, wenn es Inline-Block-Elemente innerhalb

Question

hat Also habe ich eine Wrapper div, die ich möchte die Breite des Inhalts in sein. Ich habe gelesen, dass der beste Weg das zu tun ist, es zu machen display: inline-block; Das Problem ist, das funktioniert nicht, wenn ich eine Reihe von Inline-Block-Elementen innerhalb der div habe. Irgendeine Möglichkeit, das zu beheben?

JSFiddle

HTML

<div class="wrapper"> 
    <div class="inner-wrap"> 
    <h1>Heading</h1> 

    <div class="item"> 
     <h2>Item 1</h2> 
     <p>Details</p> 
    </div> 
    <div class="item"> 
     <h2>Item 1</h2> 
     <p>Details</p> 
    </div> 
    <div class="item"> 
     <h2>Item 1</h2> 
     <p>Details</p> 
    </div> 
    <div class="item"> 
     <h2>Item 1</h2> 
     <p>Details</p> 
    </div> 
    </div> 
</div> 

CSS

.wrapper { 
    background-color: white; 
    width: 100%; 
    display: block; 
} 

.inner-wrap { 
    display: inline-block; 
    border: 1px solid black; 
} 

.item { 
    display: inline-block; 
    background-color: red; 
    margin: 20px; 
    padding: 30px; 
} 

Answer 1

Mit inline-flex statt inline-block die innere Hülle Skala auf seine Kinder machen:

.inner-wrap { 
    display: inline-flex; 
    border: 1px solid black; 
} 

Answer 2

Meinst du, du willst .inner-wrap die Breite der breitesten .item sein? Wenn ja, dann .item {display: block; width: auto;}