SVG D3 Scrolling with max height

Question

I have a very simple ui with bunch of rect added on a scrolling div container with max-height.

https://jsfiddle.net/bikrantsharma/eqnnd84v/

.legend-main-div {
  padding: 2%;
  height: 150px;
  overflow-y: scroll;
  border: 1px solid blue;
}

it is only showing only few svg items. how can i show all the items in the container with the same max-height?

Answer 1

You are correct in setting the height using a percentage unit. However, the view box is wrongly named: it is viewBox, not viewbox.

.attr('viewBox', '0 0 500 ' + responsiveDivHeight + '')

Here is your updated fiddle: https://jsfiddle.net/ahafvqzw/