1

A similar problem here: GWT Google Charts grow but don't shrink

I have a d3 chart that is set to be responsive. If it's inside a flexbox layout, it will grow, but will not shrink. See the code in this codepen:

https://codepen.io/bentedder/pen/NyeQXd

body {
  display: flex;
}
.chart-wrap {
  flex: 1;
  flex-basis: 100%;
}
.chart {
  background: #efefef;
}

<div class="chart-wrap">
  <div class="chart"></div>
</div>
bentedder
  • 796
  • 6
  • 21
  • When the chart is resized its witdth and height are being set in addition to the viewBox attribute. Take out the width and height and it will scale appropriately. – psdpainter Feb 28 '18 at 16:43
  • @Mark only the width and height are being set on `resize`, the viewbox settings are set only once initially. The width/height of the SVG needs to be set so that it can grow as you stretch the window... – bentedder Feb 28 '18 at 16:48
  • 1
    Add `min-width: 0` to `.chart-wrap`. https://codepen.io/anon/pen/zReOYb – Michael Benjamin Feb 28 '18 at 16:52
  • 1
    You can set a max-width and/or min-width in your css to constrain the max/min svg dimensions, but you don't need those attributes set on your root svg node: https://codepen.io/psdpainter/pen/zReOXv. – psdpainter Feb 28 '18 at 17:27

0 Answers0