title: C3 charts unresponsive in responsive grid
body: <p>I am using a responsive grid and I am seeing an unusual behavior regarding the responsiveness of the two boxes. The two boxes have two c3 charts loading from a javascript. When I load the page in a Desktop, everything is fine. When I am trying to reduce the window size, the boxes that contain the charts collapse. The boxes are shown vertically instead of horizontally (although the screen size is not small). </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var chart = c3.generate({
      data: {
          x: 'x',
          columns: [
              ['x', '2018-03-02', '2018-03-10'],
              ['Cost', 2.023, 0.3]
          ]
      },
      axis: {
          x: {
              type: 'timeseries',
              tick: {
                  format: '%Y-%m-%d'
              }
          }
      }
  });
  
  setTimeout(function () {
      chart.load({
          columns: [
              ['Cost', 2.023, 0.3]
          ],
          types: {
              Cost: 'bar'
          },
          colors: {
              Cost: '#00BBDE'
          }
      });
  }, 10);
  
  //Second Chart
  
  var months = ['2018-03-02', '2018-03-10'];
  var columnData = [
      ['aaaaaaaaaaaa', 1.2, 0.3],
      ['bbbbbbbbbbbb', 0.445, 0],
      ['ccccccccccccc', 0.378, 0]
  ];
  
  
  var chart2 = c3.generate({
      bindto: '#chart2',
      data: {
          columns: columnData,
          type: 'bar',
          colors: {
              aaaaaaaaaaaa: '#00BBDE',
              bbbbbbbbbbbb: '#90EE7E',
              ccccccccccccc: '#F45B5B'
          },
          groups: [['aaaaaaaaaaaa', 'bbbbbbbbbbbb', 'ccccccccccccc']],
      },
  
      axis: {
          x: {
              type: 'category',
              categories: months,
          }
      },
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@charset "UTF-8";
  @import url('https://fonts.googleapis.com/css?family=Roboto');
  body {
      color: #404040;
      font: 100 1em/150% "Roboto", Helvetica, sans-serif;
  }
  
  .wrapper {
      width: 100%;
      margin: auto;
  }
  
  h2, h3, h4 {
      font-weight: 900;
      color: #333;
      margin: 1.5em 0 0.5em;
      background: #00BBDE;
  }
  
  h1 {
      font-size: 2em;
  }
  
  h2 {
      font-size: 1.8em;
  }
  
  h3 {
      font-size: 1.5em;
  }
  
  h4 {
      font-size: 1.3em;
  }
  
  strong {
      font-weight: 600;
  }
  
  hr {
      border: none;
      height: 1px;
  }
  
  .img-placeholder {
      background-image: url("http://placehold.it/200x100/CC99CC/ffffff&amp;text=Feature");
      background-size: cover;
      min-height: 100px;
      min-width: 100px;
  }
  
  /*Basic Grid Styles*/
  
  .Grid {
      display: flex;
      flex-flow: row;
      flex-wrap: wrap;
  }
  
  .u-textCenter {
      text-align: center;
  }
  
  .Grid-cell {
      flex: 1;
  }
  
  .Demo {
      padding: .8em 1em 0;
      margin-bottom: 1em;
      transition: background-color 0.3s ease;
  }
  
  .Demo:after {
      content: "";
      display: block;
      margin-top: .8em;
      height: 1px;
  }
  
  /* With gutters*/
  
  .Grid--gutters {
      margin-left: -1em;
  }
  
  .Grid--gutters .Grid-cell {
      padding-left: 1em;
  }
  
  .Grid--gutters .Grid--nested .Grid-cell:first-of-type .Demo {
      margin-right: 1em;
  }
  
  /* Justify per row*/
  
  .Grid--right {
      justify-content: flex-end;
  }
  
  .Grid--center {
      justify-content: center;
  }
  
  /* Alignment per row */
  
  .Grid--top {
      align-items: flex-start;
  }
  
  .Grid--bottom {
      align-items: flex-end;
  }
  
  .Grid--center {
      align-items: center;
  }
  
  /* Alignment per cell */
  
  .Grid-cell--top {
      align-self: flex-start;
  }
  
  .Grid-cell--bottom {
      align-self: flex-end;
  }
  
  .Grid-cell--center {
      align-self: center;
  }
  
  /*===========================================*/
  
  /* Base classes for all media - Mobile first */
  
  .Grid--cols-2&gt;.Grid-cell {
      flex: 0 0 100%;
  }
  
  .Grid--cols-3&gt;.Grid-cell {
      flex: 0 0 100%;
  }
  
  .Grid--cols-4&gt;.Grid-cell {
      flex: 0 0 100%;
  }
  
  .Grid--cols-6&gt;.Grid-cell {
      flex: 0 0 calc(50% - 1em);
  }
  
  .Grid--cols-12&gt;.Grid-cell {
      flex: 0 0 calc(33.3333% - 1em);
  }
  
  .Grid--holly-grail .aside, .Grid--holly-grail .main {
      flex: 1 100%;
  }
  
  /* One of -- columns*/
  
  .Grid--1of2&gt;.Grid-cell, .Grid--1of4&gt;.Grid-cell:first-of-type, .Grid--1of3&gt;.Grid-cell:first-of-type {
      flex: 0 0 100%;
  }
  
  .Grid--1of6&gt;.Grid-cell:first-of-type {
      flex: 0 0 50%;
  }
  
  .Grid--fit&gt;.Grid-cell {
      flex: 1;
  }
  
  .Grid--full&gt;.Grid-cell {
      flex: 0 0 100%;
  }
  
  /* Tablet (medium) screens */
  
  @media (min-width: 30em) {
      .Grid--cols-4&gt;.Grid-cell {
          flex: 0 0 calc(50% - 1em);
      }
      .Grid--cols-6&gt;.Grid-cell {
          flex: 0 0 calc(33.3333% - 1em);
      }
      .Grid--cols-12&gt;.Grid-cell {
          flex: 0 0 calc(16.6666% - 1em);
      }
      .Grid--holly-grail .aside {
          flex: 1 calc(25% - 1em);
      }
      .Grid--1of2&gt;.Grid-cell {
          flex: 0 0 50%;
      }
      .Grid--1of6&gt;.Grid-cell:first-of-type {
          flex: 0 0 30%;
      }
      .Grid--1of4&gt;.Grid-cell:first-of-type {
          flex: 0 0 50%;
      }
      .Grid--1of3&gt;.Grid-cell:first-of-type {
          flex: 0 0 100%;
      }
  }
  
  /* Large screens */
  
  @media (min-width: 38em) {
      .Grid--cols-2&gt;.Grid-cell, .Grid--cols-3&gt;.Grid-cell, .Grid--cols-4&gt;.Grid-cell, .Grid--cols-6&gt;.Grid-cell, .Grid--cols-12&gt;.Grid-cell {
          flex: 1;
      }
      .Grid--holly-grail .main {
          flex: 2;
      }
      .Grid--holly-grail .aside {
          flex: 1;
      }
      .Grid--holly-grail .aside-1 {
          order: 1;
      }
      .Grid--holly-grail .main {
          order: 2;
      }
      .Grid--holly-grail .aside-2 {
          order: 3;
      }
      .Grid--1of2&gt;.Grid-cell {
          flex: 0 0 50%;
      }
      .Grid--1of6&gt;.Grid-cell:first-of-type {
          flex: 0 0 16.6666%;
      }
      .Grid--1of4&gt;.Grid-cell:first-of-type {
          flex: 0 0 25%;
      }
      .Grid--1of3&gt;.Grid-cell:first-of-type {
          flex: 0 0 30%;
      }
      .Grid--gutters.Grid--nested .Grid-cell:first-of-type .Demo {
          margin-right: 0;
      }
  }
  
  @import url('https://fonts.googleapis.com/css?family=Roboto');
  #dynamic_table {
      overflow: hidden;
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
      line-height: 1.42em;
      color: #454545;
      text-transform: capitalize;
      background: #124;
  }
  
  h1 {
      font-size: 3em;
      font-weight: 300;
      line-height: 1em;
      text-align: center;
      color: #4DC3FA;
  }
  
  h2 {
      font-size: 1em;
      font-weight: 300;
      text-align: center;
      display: block;
      line-height: 1em;
      padding-bottom: 2em;
      color: #99C63A;
  }
  
  h2 a {
      font-weight: 700;
      text-transform: uppercase;
      color: #99C63A;
      text-decoration: none;
  }
  
  #dynamic_table th h1 {
      font-weight: bold;
      font-size: 1em;
      text-align: left;
      color: #454545;
  }
  
  #dynamic_table td {
      font-weight: normal;
      font-size: 1em;
      -webkit-box-shadow: 0 2px 2px -2px #99C63A;
      -moz-box-shadow: 0 2px 2px -2px #99C63A;
      box-shadow: 0 2px 2px -2px #99C63A;
  }
  
  #dynamic_table {
      text-align: left;
      overflow: hidden;
      width: 99%;
      margin: 0 auto;
      display: table;
      padding: 0 0 8em 0;
  }
  
  #dynamic_table td, #dynamic_table th {
      padding-bottom: 2%;
      padding-top: 2%;
      padding-left: 2%;
  }
  
  /* Background-color of the odd rows */
  
  #dynamic_table tr:nth-child(odd) {
      background-color: #fff;
  }
  
  /* Background-color of the even rows */
  
  #dynamic_table tr:nth-child(even) {
      background-color: #fff;
  }
  
  #dynamic_table th {
      background-color: #f1f1f1;
  }
  
  /*D3 CSS*/
  
  @charset "UTF-8";
  @import url('https://fonts.googleapis.com/css?family=Roboto');
  body {
      background: #3A3A4F;
  }
  
  .c3-shape .c3-shape-0 .c3-bar .c3-bar-0 {
      stroke: rgb(124, 10, 44);
      fill: rgb(124, 0, 44);
      opacity: 1;
  }
  
  .c3 svg {
      font: 16px Roboto;
      color: #f1f1f1!important;
  }
  
  .c3 line, .c3 path {
      fill: none;
      stroke: #f1f1f1;
  }
  
  .c3 text {
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none
  }
  
  .c3-bars path, .c3-event-rect, .c3-legend-item-tile, .c3-xgrid-focus, .c3-ygrid {
      shape-rendering: crispEdges
  }
  
  .c3-chart-arc path {
      stroke: #fff
  }
  
  .c3-chart-arc text {
      fill: #fff;
      font-size: 13px
  }
  
  .c3-grid line {
      stroke: #aaa
  }
  
  .c3-grid text {
      fill: #aaa
  }
  
  .c3-xgrid, .c3-ygrid {
      stroke-dasharray: 3 3
  }
  
  .c3-text.c3-empty {
      fill: gray;
      font-size: 2em
  }
  
  .c3-line {
      stroke-width: 1px
  }
  
  .c3-circle._expanded_ {
      stroke-width: 1px;
      stroke: #fff
  }
  
  .c3-selected-circle {
      fill: #fff;
      stroke-width: 2px
  }
  
  .c3-bar {
      stroke-width: 0
  }
  
  .c3-bar._expanded_ {
      fill-opacity: .75
  }
  
  .c3-target.c3-focused {
      opacity: 1
  }
  
  .c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
      stroke-width: 2px
  }
  
  .c3-target.c3-defocused {
      opacity: .3!important
  }
  
  .c3-region {
      fill: #4682b4;
      fill-opacity: .1
  }
  
  .c3-brush .extent {
      fill-opacity: .1
  }
  
  .c3-legend-item {
      font-size: 12px
  }
  
  .c3-legend-item-hidden {
      opacity: .15
  }
  
  .c3-legend-background {
      opacity: .75;
      fill: #fff;
      stroke: #d3d3d3;
      stroke-width: 1
  }
  
  .c3-tooltip-container {
      z-index: 10
  }
  
  .c3-tooltip {
      font-family: Roboto;
      border-collapse: collapse;
      border-spacing: 0;
      background-color: #fff;
      empty-cells: show;
      -webkit-box-shadow: 7px 7px 12px -9px #777;
      -moz-box-shadow: 7px 7px 12px -9px #777;
      box-shadow: 7px 7px 12px -9px #777;
      opacity: .9
  }
  
  .c3-tooltip tr {
      border: 1px solid #000
  }
  
  .c3-tooltip th {
      background-color: #000;
      font-size: 14px;
      padding: 2px 5px;
      text-align: left;
      color: #FFF
  }
  
  .c3-tooltip td {
      font-size: 13px;
      padding: 3px 6px;
      background-color: #fff;
      border-left: 1px solid #000
  }
  
  .c3-tooltip td&gt;span {
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-right: 6px
  }
  
  .c3-tooltip td.value {
      text-align: right
  }
  
  .c3-area {
      stroke-width: 0;
      opacity: .2
  }
  
  .c3-chart-arcs-title {
      dominant-baseline: middle;
      font-size: 1.3em
  }
  
  .c3-chart-arcs .c3-chart-arcs-background {
      fill: #e0e0e0;
      stroke: none
  }
  
  .c3-chart-arcs .c3-chart-arcs-gauge-unit {
      fill: #000;
      font-size: 16px
  }
  
  .c3-chart-arcs .c3-chart-arcs-gauge-max, .c3-chart-arcs .c3-chart-arcs-gauge-min {
      fill: #777
  }
  
  .c3-chart-arc .c3-gauge-value {
      fill: #000
  }
  
  /*axis colors*/
  
  .tick text {
      fill: #f1f1f1;
  }
  
  .c3-legend-item text {
      fill: #f1f1f1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="Grid Grid--gutters Grid--cols-2 u-textCenter"&gt;
      &lt;div class="Grid-cell"&gt;
          &lt;div class="Demo file"&gt;
              &lt;h3&gt;Chart 1&lt;/h3&gt;
              &lt;div id="chart"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="Grid-cell"&gt;
          &lt;div class="Demo file"&gt;
              &lt;h3&gt;Chart 2&lt;/h3&gt;
              &lt;div id="chart2"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am still trying to find what is causing that. I can post a video of the unusual behavior too. I hope it is not caused by my jet lag. </p>