Javascript Angularjs根据父元素宽度调整宽度

我使用的是AngularJS和Bootstrap，其结构如下：

<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>

多列数据网格

我希望将我的

柔性宽度组件

拉伸，以自动填补其与

固定宽度组件

之间的间隙，以获得大于

1200px

的任何分辨率。 两个组件需要相邻显示

---

非常感谢您的建议

您可以获取父容器

offsetWidth

并从中减去固定宽度：

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' 
      });

    };
});

---

这里是

我知道现在回答这个问题已经很晚了，但它可能会帮助其他人

工作

固定组件
柔性元件
.家长{
高度：100px；
显示器：flex；
}
.柔性组件{
弹性：1；
}
.固定组件{
宽度：100px；
}
.边界{
边框：1px纯黑；
}

尝试了最小宽度、最大宽度和媒体查询，但没有帮助。如果没有固定宽度组件，我会将百分比用于div宽度或引导的脚手架类。是和选项吗？@hitautomistruct它仍然没有标准化，所以我不习惯使用它，在使用Flexbox之前，我更喜欢其他选项，请参见下面我的答案。

<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>