진행 막대가있는 플렉스 박스가 자랄 수 없음

Question

나는 열이있는 페이지 디자인을 가지고 있습니다. 하나, 둘 또는 세 개의 열을 가질 수 있습니다. Theses 열은 같은 크기 여야합니다.

저는 flexbox를 사용하기 때문에 열을 추가/제거하고 브라우저가 열 너비의 크기 조정을 처리하게합니다.

이제 열의 텍스트가 열 너비보다 클 때 문제가 발생했습니다.

.main { 
 
    display: flex; 
 
} 
 
.main > div { 
 
    flex: 1 0 auto; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="main"> 
 
    <div> 
 
    <div class="progress"> 
 
     <div role="progressbar" style="width: 70%" 
 
      aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" 
 
      class="progress-bar progress-bar-info progress-bar-striped active"></div> 
 
    </div> 
 
    <p>Test Test Test Test Test Test Test Test Test Test Test Test Test </p> 
 
    </div> 
 
    <div style="background: #00F;">TEST2</div> 
 
</div>

열이
는 어떻게 만들 수있는 크기가 동일해야합니다

은 내가 MCVE을 구축 ... 열 성장하고 그 설계의 균일 성을 휴식 그래서 열은 내용 너비에 영향을받지 않습니까?

Answer 1

대신 flex: 1 0 auto 당신은 flex: 1를 사용하고 파이어 폭스에 flex: 1 1 0 또는 크롬에 flex: 1 1 0%입니다.

.main { 
 
    display: flex; 
 
} 
 
.main > div { 
 
    flex: 1; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="main"> 
 
    <div> 
 
    <div class="progress"> 
 
     <div role="progressbar" style="width: 70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" class="progress-bar progress-bar-info progress-bar-striped active"></div> 
 
    </div> 
 
    <p>Test Test Test Test Test Test Test Test Test Test Test Test Test</p> 
 
    </div> 
 
    <div style="background: #00F;">TEST2</div> 
 
</div>

Answer 2

.main > div { 
    flex: 1 0 50%; 
} 

이 트릭을 할 것입니다은

.main { 
 
    display: flex; 
 
} 
 
.main > div { 
 
    flex: 1 0 50%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
<div class="main"> 
 
    <div> 
 
    <div class="progress"> 
 
     <div role="progressbar" style="width: 70%" 
 
      aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" 
 
      class="progress-bar progress-bar-info progress-bar-striped active"></div> 
 
    </div> 
 
    <p>Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test </p> 
 
    </div> 
 
    <div style="background: #00F;">TEST2</div> 
 
</div>