インラインフレックスを表示するが、全幅を維持する

Question

私は2つのdivs幅のいずれかが減少するinline-flexdivの中に2つのdivを配置します。私は、ブートストラップを使用しています：

<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クラスはそれがないが、それはまだ100％にする必要があります代わりに小さなcol-md-10なったcol-md-10とインラインでなければなりません。私は正しいことをしていますか？私はcss/scssで強くない。

Answer 1

私はあなたの問題を完全に理解していません。インラインフレックスアイテムのデフォルト値はフルサイズではありません。ブートストラップのCSSではflex-growプロパティが0に設定されているため、CSSを追加する必要があります。

私は正しいことを理解すれば、1つのスタイルとクラスを追加することで問題が解決されると思います。

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


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

チェックアウトthis pen助けを