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

내 텍스트가 flexgrow을 방해하지 않고 div.text1 및 .text2 내부 포장하고자합니다. 즉, flexbox가 텍스트에 상관없이 동일한 크기로 유지되도록하는 방법이 있습니까?

btw. 크롬을 사용하고 있습니다.

Codepen 링크 : https://codepen.io/Konrad29/pen/Oxbmqx

Answer 1

flex-basis에 0을 설정하면, 당신은

.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로를 만들 것입니다 규칙 flex-grow

업데이트와 폭 (공간을 배포)를 제어 사용 가능한 공간의 1/3을 차지하고 text2 2/3.

은 각 text1/2에 넣어 무슨 내용을 바탕으로, 당신은 또한이 내용

Updated codepen

스택 조각보다 작을 수 있도록 0에, auto에 min-width, 기본값을 설정해야 할 수도 있습니다

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