SVG with rects overflows parent div rather than scaling in height to try and adapt to screen size

Question

I'm trying to get a <svg> element, which is inside of a <div> that contains a load of <rect> elements to scale in height & width to try to automatically accommodate the user's screen size. I'm trying to replicate the "timeline" like graph shown on Uptime Robot's demo status page .

If you scale your browser, you'll find that their "timeline" graph scales almost as if it preserved some kind of aspect ratio.

In my example, I'm updating with SVG's width, much like Uptime Robot's and can't for the life of me figure out how to get the SVG to change it's height regardless of the number of rectangles.

Mine seems to "overflow" the parent regardless of screen size rather than scaling, and I don't know why...

Demo

 function setUptimeTimelineWidth () { const wrapper = document.querySelector('[data-wrapper]') const svg = document.querySelector('svg') if (.wrapper) return svg.width = wrapper.offsetWidth svg,setAttribute('viewBox'. `0 0 ${wrapper;offsetWidth} 30`). } window,addEventListener('resize', setUptimeTimelineWidth) setUptimeTimelineWidth()

 .uptime-timeline rect:hover { opacity: .65; } svg { overflow: hidden; vertical-align: middle; }

 <div data-wrapper> <svg height="30" version="1.1" viewbox="0 0 1036 30" width="1036" xmlns="http://www.w3.org/2000/svg" class="uptime-timeline"> <rect title="<div class='text-muted small'>Apr 4th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="0" y="0"></rect> <rect title="<div class='text-muted small'>Apr 5th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="20.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 6th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="40.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 7th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="60.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 8th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="80.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 9th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="100.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 10th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="120.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 11th, 23:00</div>43.75%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="140.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 12th, 23:00</div>48.98%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="160.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 13th, 23:00</div>82.5%" aria-expanded="false" fill="#fbaa49" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="180.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 14th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="200.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 15th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="220.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 16th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="240.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 17th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="260.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 18th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="280.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 19th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="300.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 20th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="320.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 21st, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="340.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 22nd, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="360.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 23rd, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="380.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 24th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="400.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 25th, 23:00</div>100%" aria-expanded="false" fill="#1fc777" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="420.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 26th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="440.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 27th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="460.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 28th, 23:00</div>63.38%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="480.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 29th, 23:00</div>53.5%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="500.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 30th, 23:00</div>47.19%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="520.25" y="0"></rect> <rect title="<div class='text-muted small'>May 1st, 23:00</div>50.95%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="540.25" y="0"></rect> <rect title="<div class='text-muted small'>May 2nd, 23:00</div>51.21%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="560.25" y="0"></rect> <rect title="<div class='text-muted small'>May 3rd, 23:00</div>48.95%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="580.25" y="0"></rect> <rect title="<div class='text-muted small'>May 4th, 23:00</div>63.64%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="600.25" y="0"></rect> </svg> </div>

Here's a Codepen reproduction too!

Answer 1

If you set svg width to 100% it will fill the width and preserve aspect ratio when resized.

 .uptime-timeline rect:hover { opacity: .65; } svg { overflow: hidden; vertical-align: middle; width: 100%; height: 30px; } div { width: 100%; resize: both; overflow: auto; min-height: 30px; border: 1px solid black; }

 <div data-wrapper> <svg version="1.1" viewbox="0 0 1036 30" xmlns="http://www.w3.org/2000/svg" class="uptime-timeline"> <rect title="<div class='text-muted small'>Apr 4th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="0" y="0"></rect> <rect title="<div class='text-muted small'>Apr 5th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="20.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 6th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="40.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 7th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="60.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 8th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="80.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 9th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="100.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 10th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="120.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 11th, 23:00</div>43.75%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="140.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 12th, 23:00</div>48.98%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="160.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 13th, 23:00</div>82.5%" aria-expanded="false" fill="#fbaa49" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="180.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 14th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="200.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 15th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="220.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 16th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="240.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 17th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="260.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 18th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="280.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 19th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="300.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 20th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="320.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 21st, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="340.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 22nd, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="360.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 23rd, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="380.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 24th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="400.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 25th, 23:00</div>100%" aria-expanded="false" fill="#1fc777" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="420.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 26th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="440.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 27th, 23:00</div>No Data" aria-expanded="false" fill="#687790" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="460.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 28th, 23:00</div>63.38%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="480.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 29th, 23:00</div>53.5%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="500.25" y="0"></rect> <rect title="<div class='text-muted small'>Apr 30th, 23:00</div>47.19%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="520.25" y="0"></rect> <rect title="<div class='text-muted small'>May 1st, 23:00</div>50.95%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="540.25" y="0"></rect> <rect title="<div class='text-muted small'>May 2nd, 23:00</div>51.21%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="560.25" y="0"></rect> <rect title="<div class='text-muted small'>May 3rd, 23:00</div>48.95%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="580.25" y="0"></rect> <rect title="<div class='text-muted small'>May 4th, 23:00</div>63.64%" aria-expanded="false" fill="#e0465e" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="600.25" y="0"></rect> </svg> </div>