Sylar Sylar - 1 year ago 61
CSS Question

Display inline-flex but keep full width

I have place two

inside an
one of the two divs width reduces. I'm using bootstrap:

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

class should be inline with
which it does but
gets small instead it should still be at 100%. Am I doing it correct? I'm not strong with css/scss.

Answer Source

I'm not sure I entirely understand your issue. inline-flex items do not default to full width. You will need to add some css for that to happen since in the css for bootstrap the flex-grow property is set to 0;

I think adding one style and a class will fix your issue, again if I understand you right.

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

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

Check out this pen for help