Flex項目與兒童寬度相同

我正在嘗試製作一個容器元素，一個Flex項目，其寬度與跨文本子項相同。正如您通過檢查代碼片段中的結果所看到的那樣，儘管容器.calc-text-container佔用了比子元素更多的空間，即使flex-grow-property設置爲0.Flex項目與兒童寬度相同

有沒有辦法實現期望的結果？

.calc { 
 
    width: 230px; 
 
    background: green; 
 
    height: 100px; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
} 
 
.calc a { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.calc-icon-container { 
 
    margin-right: 1em; 
 
} 
 
.calc-text-container { 
 
    flex: 0 0 0; 
 
    background: rgba(20,200,0,0.8); 
 
}

<div class="calc"> 
 
    <a href="#"> 
 
    <div class="calc-icon-container"><span class="calc-icon"></span></div> 
 
\t <div class="calc-text-container"><span class="calc-text">To do something megagiga</span></div> 
 
    </a> 
 
</div>

來源

2017-03-01 Emil

我沒有看到您的演示問題。你能提供更多細節嗎？或者說明。 –

剛撓：0 0 0;將完成這項工作。

.calc { 
 
    width: 230px; 
 
    background: green; 
 
    height: 100px; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
} 
 
.calc a { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.calc-icon-container { 
 
    margin-right: 1em; 
 
} 
 
.calc-text-container { 
 
    flex: 0 0 0; // or just flex: 0; 
 
    background: rgba(20,200,0,0.8); 
 
}

<div class="calc"> 
 
    <a href="#"> 
 
    <div class="calc-icon-container"><span class="calc-icon"></span></div> 
 
\t <div class="calc-text-container"><span class="calc-text">Reallylongword Short shortandlong</span></div> 
 
    </a> 
 
</div>

來源

2017-03-01 10:03:53

與此相關的問題是，它不會允許一行可放在一行上的句子 - 將彈性基礎設置爲0將嘗試始終包裝文本。 – Emil

Flex項目與兒童寬度相同

回答

相關問題