Flexbox, text, Einwickeln

Question

Ich habe folgendes Layout:

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

ich meinen Text innerhalb des div.text1 und .text2 ohne die flexgrow zu stören wickeln möchten. Mit anderen Worten, gibt es eine Möglichkeit, Flexbox zu zwingen, in der gleichen Größe zu bleiben, egal welchen Text es enthält?

Btw. Ich benutze Chrome.

Codepen Link: https://codepen.io/Konrad29/pen/Oxbmqx

Answer 1

Durch die flex-basis-0 Einstellung steuern Sie die Breite (den Raum verteilen) mit flex-grow

aktualisieren diese Regeln

.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 */ 
} 

Dies wird die text1 machen Nehmen Sie 1/3 des verfügbaren Speicherplatzes und die text2 2/3.

Basierend auf welche Inhalte Sie in jedem text1/2 setzen wird, müssen Sie möglicherweise auch min-width setzen, die standardmäßig auf auto, zu 0

Updated codepen

Stapel Schnipsel es die kleiner als sein Inhalt zu ermöglichen,

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