iframe无法放入边界-角度6

Question

当在较小的屏幕上iframe显得太大而无法在其放置的框内切割时，我无法正确调整iframe的大小，而无法适当调整其大小（屏幕截图）

父HTML

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { shallow, mount } from 'enzyme';
import { BrowserRouter as Router, Route } from 'react-router-dom';

import { JSDOM } from 'jsdom';

import configureStore from '../../store/configureStore';

global.Promise = require('bluebird');
const util = require('util');

jest.mock('../../actions/simulationRuns');
let App;

describe('App', () => {
  beforeEach(() => {
    // Set up some mocked out file info before each test
    App = require('../App').default;
  });

  it('renders without crashing - mount', () => {
    const div = document.createElement('div');
    ReactDOM.render(
      <Router>
        <Provider store={configureStore()}>
          <Route path="/">
            <App />
          </Route>
        </Provider>
      </Router>,
      div
    );
  });
});

父CSS

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

组件HTML

<div class="component-panel">
 <component></component>
</div>

组件CSS

  .component-panel {
    grid-column-start: 2;
    grid-column-end: 25;
    grid-row-start: 4;
    grid-row-end: 37;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
   }