子要素と同じ幅の子要素

Question

子要素と同じ幅の子要素であるコンテナ要素を作成しようとしています。 flex-grow-propertyが0に設定されていても、コンテナ.calc-text-containerは子要素よりも多くの領域を占めますが、スニペットから結果を調べると分かります。

希望の結果？

.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>

Answer 1

ただ、フレックス：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>