How to fill <div> with one fixed and one flex width column/div?

Hi there!

I struggle to implement a customer request.

He wants a specific menu, and to make that happen I had to modify the wordpress theme. Which works fine so far, but I can't find out how to format the header row properly.

The html generated by header.php looks something like this.

<div class="row">

<div class="col-md-2 col-sm-8 col-ss-9 clearfix">

<div id="logo" class="logocase"></div>


<div class="col-md-10 col-sm-4 col-ss-3">

<nav> …. </nav>



The logo is (and needs to be) fixed width and I want the right colum to fill the rest of the browser window.

I tried several combinations of display and float styles but never get the right effect.

At the moment the row is display: block, float: none, width: 100%

The logo column is display: block, float: left, width: width: 324px

The right column is display: block, float: left, width: width: 628px

Of course, that doesn't scale the right column properly.

Could you suggest some display and float styles that would do the job?