Sylar Sylar - 4 months ago 15
CSS Question

Display inline-flex but keep full width

I have place two

div
inside an
inline-flex
div
one of the two divs width reduces. I'm using 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>


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

Answer

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">
    ....
</div>


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

Check out this pen for help

Comments