Outer Div内部にインラインブロック要素がある場合のコンテンツの幅

Question

したがって、内容の幅にしたいラッパーdivがあります。私はそれを行うための最善の方法は、それを行うことですdisplay: inline-block;問題は、私はdiv内のインラインブロック要素の束を持っているときに動作しません。これを修正する方法はありますか？

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> 

inline-flexの代わりinline-blockを使用して

.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

CSSはその子に内側のラッパースケールを行います。

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

Answer 2

幅広い.itemの幅を.inner-wrapにしたいのですか？ もしそうなら、 .item {表示：ブロック;幅：自動;}