I'm using AngularJS & Bootstrap, and have the following structure:

<parent-div>
  <flexible-width-component 
            class="pull-left" 
            style="display: inline-block; min-width: 700px;">Data grid with many columns
  </flexible-width-component>
  <fixed-width-component 
            class="pull-right" 
            style="width:400px; display: inline-block">
  </fixed-width-component>
</parent-div>

I wish to have my flexible-width-component stretch to automatically fill the gap between itself and the fixed-width-component, for any resolution wider than 1200px. Both components need to be displayed adjacent to each other.

Any advice greatly appreciated!

I'm using AngularJS & Bootstrap, and have the following structure:

<parent-div>
  <flexible-width-component 
            class="pull-left" 
            style="display: inline-block; min-width: 700px;">Data grid with many columns
  </flexible-width-component>
  <fixed-width-component 
            class="pull-right" 
            style="width:400px; display: inline-block">
  </fixed-width-component>
</parent-div>

I wish to have my flexible-width-component stretch to automatically fill the gap between itself and the fixed-width-component, for any resolution wider than 1200px. Both components need to be displayed adjacent to each other.

Any advice greatly appreciated!

• javascript
• css
• angularjs

• Tried min-width, max-width & media queries, didn't help. – user90766 Commented Dec 24, 2013 at 8:12
• If I didn't have the fixed-width component, I would have used percentages for the div widths or bootstrap's scaffolding classes. – user90766 Commented Dec 24, 2013 at 8:25
• Is flexbox and option? – hitautodestruct Commented Dec 28, 2013 at 20:43
• @hitautodestruct its still not standardized so I'm not comfortable using it, and would prefer other options before going with flexbox – user90766 Commented Dec 30, 2013 at 4:02
• See my answer below. – hitautodestruct Commented Aug 13, 2014 at 10:14

2 Answers 2

You can get your parent containers offsetWidth and subtract your fixed width from it:

var example = angular.module('exmp', []);

example.directive('flexibleWidth', function() {
    return function(scope, element, attr) {

      // Get parent elmenets width and subtract fixed width
      element.css({ 
        width: element.parent()[0].offsetWidth - 400 + 'px' 
      });

    };
});

Here's a demo

i know its very late to answer this question, but it might help others.

Working jsfiddle

<div class="parent border">
  <div class="fixed-component border">
    Fixed Component
  </div>
  <div class="flexible-component border">
    flexible component
  </div>
</div>


<style>
.parent {
  height: 100px;
  display: flex;
}

.flexible-component {
  flex: 1;
}

.fixed-component {
  width: 100px;
}
.border {
  border: 1px solid black;
}
</style>