setting overflow direction in css causes Y-axis labels to clip the cartesian line

[SethHollis]

Creating the line chart in javascript

const margin = { top: 70, right: 40, bottom: 40, left: 40 };
const width = 500 - margin.left - margin.right;
const height = 300 - margin.top - margin.bottom;

const x = d3.scaleTime()
  .range([0, width]);

const y = d3.scaleLinear()
 .range([height, 0]);

const svg = d3.select("#chart-container")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

x.domain(d3.extent(dataArray, d => d.formattedDate));
y.domain([0, d3.max(dataArray, d => d.formattedAmount)]);

svg.append("g")
  .attr("transform", `translate(0,${height})`)
  .call(d3.axisBottom(x)
    .ticks(d3.timeWeek.every(1))
    .tickFormat(d3.timeFormat("%b %d"))); 

svg.append("g")
  .attr("transform", `translate(${width}, 0)`)
  .call(d3.axisRight(y))`

CSS styles on the div "chart-container" and it's scrollbar.

.chart-container {
  width: 400px;
  overflow-x: auto;
  direction: rtl;
}
.overflow {
  min-width:400px;
}

Image of the issue

It seems to happen only when I apply the style direction: rtl;
If I comment out that specific line it works as normal.
neither transforming the axis left and right nor calling the axisLeft or axisRight have any effect on the labels clipping out. Calling axisTop or axisBottom doesn't clip but obviously the chart isn't laid out right. Perhaps someone knows of a work-around?

I'm brand new to D3 and pretty darn new to programming so I could be missing something obvious
genuine thanks friends