인라인 플렉스를 표시하지만 최대 너비를 유지하십시오.

Question

두 칸이 안에 있고 inline-flexdiv 두 divs 중 하나가 줄어 듭니다.

이

<section> 
    <div class="container"> 
    <div class="flexx"> 
     <div class="foo"> 
     .... 
     </div> 
     <div class="col-md-10"> 
     <div class="card"> 
      <div class="card-block"> 
      ... 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 

기본적으로, foo 클래스는 인라인는 않지만 col-md-10 대신 여전히 100 %에 있어야 작은 얻을 col-md-10으로해야한다 : 나는 부트 스트랩을 사용하고 있습니다. 나는 그것을 올바르게하고 있는가? 나는 CSS/scss에 강하지 않다.

Answer 1

문제를 완전히 이해하고 있는지 잘 모르겠습니다. 인라인 플렉스 항목의 기본값은 전체 너비가 아닙니다. 부트 스트랩을위한 CSS에서 flex-grow 속성이 0으로 설정되었으므로 CSS를 추가해야합니다.

한 가지 스타일과 수업을 추가하면 문제를 해결할 수 있다고 생각합니다.

// to your html 
<div class="col foo"> 
    .... 
</div> 


// to your css 
[class^="col"] { 
    flex-grow: 1; 
} 

체크 아웃 this pen 도움을