2017-03-01 22 views
0

子要素と同じ幅の子要素であるコンテナ要素を作成しようとしています。 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>

+0

。詳細をお知らせください。またはイラスト。 –

答えて

0

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

+0

この問題は、1行に収まる文が1行になることを許さないということです。フレックス単位を0に設定すると、常にテキストが折り返されます。 – Emil

関連する問題