Flexbox的文字，包装

Question

我有以下布局：

.main { 
 
    height: 200px; 
 
    width: 300px; 
 
    border: 1px solid black; 
 
    background-color: rgba(255, 46, 0, 0.5); 
 
} 
 

 
.container { 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: auto; 
 
    border: 1px solid black; 
 
    z-index: 2; 
 
    background-color: white; 
 
    display: flex; 
 
    align-items: stretch; 
 
    justify-content: center; 
 
} 
 

 
.text1 { 
 
    border: 1px solid red; 
 
    flex-wrap: nowrap; 
 
    flex-grow: 1; 
 
} 
 

 
.text2 { 
 
    border: 1px solid blue; 
 
    flex-wrap: nowrap; 
 
    flex-grow: 2; 
 
}

<div class="main"> 
 
    <div class="container"> 
 
    <div class="text1">Lorem impsum pimpsum</div> 
 
    <div class="text2">Tex2</div> 
 
    </div> 
 
</div>

，我想我的文字的div.text1和.text2里面包裹而不会干扰flexgrow。换句话说，有没有办法强制flexbox保持相同的大小，而不管其中的文字是什么？

Btw。我使用Chrome。

Codepen链接：https://codepen.io/Konrad29/pen/Oxbmqx

Answer 1

通过设置flex-basis到0，你控制的宽度（分配空间）与flex-grow

更新这些规则

.text1{ 
    border: 1px solid red; 
    flex-wrap:nowrap; 
    flex:1 1 0;      /* updated */ 
    min-width: 0;     /* might be needed as well */ 
} 
.text2{ 
    border: 1px solid blue; 
    flex-wrap:nowrap; 
    flex:2 2 0;      /* updated */ 
    min-width: 0;     /* might be needed as well */ 
} 

这将使text1到占1/3的可用空间和text2 2/3。

基于你会把每个text1/2什么样的内容，你可能还需要设置min-width，默认为auto，以0允许它比它的内容

Updated codepen

堆栈段小

.main{ 
 
    height: 200px; 
 
    width: 300px; 
 
    border: 1px solid black; 
 
    background-color :rgba(255, 46, 0, 0.5); 
 
} 
 
.container{ 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: auto; 
 
    border: 1px solid black; 
 
    z-index:2; 
 
    background-color: white; 
 
    display: flex; 
 
    align-items: stretch; 
 
    justify-content:center; 
 
} 
 
.text1{ 
 
    border: 1px solid red; 
 
    flex-wrap:nowrap; 
 
    flex:1 1 0; 
 
} 
 
.text2{ 
 
    border: 1px solid blue; 
 
    flex-wrap:nowrap; 
 
    flex:2 2 0; 
 
}

<div class="main"> 
 
    <div class="container"> 
 
    <div class="text1">Lorem impsum pimpsum</div> 
 
    <div class="text2">Tex2</div> 
 
    </div> 
 
</div>