So i have a page that looks like this, the blue area is an iframe embedded from another endpoint on the same app.

when i collapse the sidebar the iframe remains the same size.

What i am trying to achieve is to display the full contents of the iframe without having to scroll horizontally. I also wanna get rid of those scrollbars and make the page look like it exists there.

Here is the relevant code

oncomine.html

{% extends "layout.html" %}

{% block title %}
    oncomine
{% endblock %}



{% block main %}

<div class='parent'>
    <iframe class="piframe" src="/dashboard/oncomine/" style="border: none;" width="600" height="600"/>
</div>


{% endblock %}

style.css

/* iframes */
.parent {
  position: relative;
  overflow: hidden;
  width: 103%;
  padding-top: 61.89%;
  margin-left: 0%;
}

.piframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

No css has been applied to the parent container of .parent.

Here is the gist link to the full html and css code gist