Display inline-flex aber volle Breite halten

Question

Ich habe Platz zwei div innerhalb einer inline-flexdiv eine der zwei divs Breite reduziert. Ich bin mit Bootstrap:

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

Grundsätzlich sollte foo Klasse inline mit col-md-10, der es tut, aber col-md-10 bekommt klein stattdessen sollte es noch bei 100% liegen. Mache ich es richtig? Ich bin nicht stark mit css/scss.

Answer 1

Ich bin mir nicht sicher, ob ich Ihr Problem vollständig verstehe. Inline-Flex-Elemente sind nicht standardmäßig auf die volle Breite eingestellt. Sie müssen etwas CSS hinzufügen, damit dies geschieht, da die flex-grow-Eigenschaft in der css for bootstrap auf 0 gesetzt ist;

Ich denke, Hinzufügen eines Stils und einer Klasse wird Ihr Problem beheben, wieder wenn ich Sie richtig verstehe.

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


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

Check out this pen um Hilfe