How to size the chart to always fill the space

Question

I have bodged the following HTML/CSS to get the chart to fill 65% of the space, leaving room for the 300px table. I would like the chart to always fill all the remaining space, regardless of how much or little is left.

https://jsfiddle.net/horacebury/2vc606wx/17/

HTML:

<div ng-app="App">
  <div ng-controller="TodoCtrl">
    <div id="tablecontainer">
      <table class="tgh">
        <tr>
          <td>Auxilliary Power</td>
        </tr>
      </table>
      <div id="example"></div>
      <table class="tg">
        <tr>
          <td class="tg-yw4l" ng-repeat="item in items track by $index">{{item}}</td>
        </tr>
      </table>
    </div>
    <div id="c3chart"></div>
  </div>
</div>

CSS:

#tablecontainer {
  float: right;
}

#c3chart {
  width: 65%;
}

Your best option would be to use [flex-box](https://css-tricks.com/snippets/css/a-guide-to-flexbox/), as long as you don't need to support early IE versions. — user3432422, Feb 24 '17 at 13:08
Have a look at the overflow:hidden answer here --> http://stackoverflow.com/questions/1260122/expand-a-div-to-take-the-remaining-width Result: https://jsfiddle.net/2vc606wx/28/ — mgraham, Feb 25 '17 at 13:34

score 0 · Accepted Answer · edited May 23 '17 at 10:29

0

Answered awesomely by @mgraham:

Have a look at the overflow:hidden answer here --> stackoverflow.com/questions/1260122/…

edited May 23 '17 at 10:29

Community

1
1

answered Feb 27 '17 at 09:03

Matt W

11,753
25
118
215

How to size the chart to always fill the space

1 Answers1