製作DIV總是有它的內容

Question

我有一個容器div有幾個要素裏面，像這樣的寬度：

<div class="container"> 
    <p>one</p> 
    <p>two</p> 
    <p>three</p> 
    <p>four</p> 
    <p>five</p> 
    <p>six</p> 
    <p>seven</p> 
    <p>eight</p> 
</div> 

它看起來像這樣：

您可以在div（藍色）擴展爲填充窗口的整個寬度。我希望它總是'擁抱'p的內部，總是有必要的最低width。

我已將其設置爲display: inline-block。現在它看起來像

問題來了。當我重新調整窗口的大小以使其中一個元素被「推」到第二行時，div不縮小以適應元素的新大小。相反，它延伸到窗口的邊緣。

我怎麼會讓股利適合其內容，調整大小，即使這樣，它會是什麼樣子呢？

我已經搜查，搜查，但找不到回答這個問題。

的jsfiddle Here

Answer 1

那是不可能的，所以儘可能接近，你可以使用flexbox爲

body { 
 
    margin: 0 
 
} 
 
.container { 
 
    background: lightblue; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    flex-wrap: wrap 
 
} 
 
.container p { 
 
    background: pink; 
 
    font-size: 40px; 
 
    margin:10px 0 
 
}

<div class="container"> 
 
    <p>one</p> 
 
    <p>two</p> 
 
    <p>three</p> 
 
    <p>four</p> 
 
    <p>five</p> 
 
    <p>six</p> 
 
    <p>seven</p> 
 
    <p>eight</p> 
 
    <p>nine</p> 
 
    <p>ten</p> 
 
</div>