如何讓flex容器佔用元素的空間？

Question

我想有一個兩行的方塊，使用flexbox。我解決不了的問題是，容器走的是頁面的整個寬度，而不是緊緊地適應元素：

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
    border-style: solid; 
 
} 
 

 
.header { 
 
    background-color: black; 
 
    color: white; 
 
} 
 

 
.body { 
 
    background-color: blue; 
 
    color: white; 
 
}

<div class="container"> 
 
    <div class="header"> 
 
    the header 
 
    </div> 
 
    <div class="body"> 
 
    the body 
 
    </div> 
 
</div>

應該怎樣設置使容器只是寬度的元素？我知道我可以強制它的width，但我希望它是由元素內容驅動的。

Answer 1

您正在尋找inline-flex

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

.container { 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
    align-items: flex-start; 
 
    border-style: solid; 
 
} 
 

 
.header { 
 
    background-color: black; 
 
    color: white; 
 
} 
 

 
.body { 
 
    background-color: blue; 
 
    color: white; 
 
}

<div class="container"> 
 
    <div class="header"> 
 
    the header 
 
    </div> 
 
    <div class="body"> 
 
    the body 
 
    </div> 
 
</div>