Html 如何制作类似于开放式桌面应用程序的组件

我正在尝试创建一个公文包网页，您可以在其中打开类似于windows xp桌面应用程序的模式。因此，外部div有一个带有关闭按钮等的外部边界/边框的背景图像，内部是另一个div，它是我的简历，应该可以滚动，但在外部div内保持固定

以下是我目前的代码：

import React, { Component } from 'react';
import Draggable from 'react-draggable';
import './modal.css'
import res from '/Users/anthonychoi98/Documents/GitHub/portfolio/src/images/resumetemp.jpg';

class Modal extends Component {

    displayInfo () {
      switch(this.props.modalInfo) {


        case 'Modal A':
          return <div className="modal-info">This is Modal A</div>

          case 'Modal B':
            return(
              <div className="resume-container">
                <div className="modal-resume" style={{backgroundImage: `url('${res}')`}}>
                </div>
              </div>
          );
        default:
          return null
      }
    }
    closeModal = (e) => {
        e.stopPropagation()
        this.props.closeModal()
    }

    render(){

    const divStyle = {
        display: this.props.displayModal ? 'block' : 'none'
        };

      return (
      <>
    <div>
      <Draggable
                axis="both"
                handle=".modal"
                defaultPosition={{x: 0, y: 0}}
                position={null}
                grid={[25, 25]}
                scale={1}
                onStart={this.handleStart}
                onDrag={this.handleDrag}
                onStop={this.handleStop}>
            <div 
            className="modal"
            style={divStyle}>

              <div className="modal-content"
                  onClick={ e => e.stopPropagation() }>

                  <span 
                  className="close"
                  onClick={ this.closeModal }>x
                  </span>



                  <div class="modal-flex">
                  {this.displayInfo()}
                  </div>
              </div>

            </div>
            </Draggable>
            </div>


      </>
      );
    }
  }


export default Modal;

---

有更好的办法吗？我知道在不同大小的屏幕上，或者如果页面被最小化/最大化，它可能看起来会出错。我可以将简历用photoshop处理到后台，但如果理解正确，我将无法滚动

，

。模式内容是应该滚动的div，是吗？首先将溢出设置为隐藏。现在，您需要在这个div中添加另一个div，并将其最小高度设置为100%，将溢出设置为滚动。不要为这个定义高度，因为它应该由内容定义。希望你是这么问的！如果我理解正确，
.modal content
是应该可滚动的div，是吗？首先将溢出设置为隐藏。现在，您需要在这个div中添加另一个div，并将其最小高度设置为100%，将溢出设置为滚动。不要为这个定义高度，因为它应该由内容定义。希望你是这么问的！


/* MODAL */
/* Background effect. It covers the entire site */
.modal {
    z-index: 1; /* Overlay effect: positioned over other containers */
    width: 55%; /* Full width */
    height: 90%; /* Full height */
    top: 0;
    left: 0;
    overflow: hidden; /* Enable scroll if needed -> use auto */
}

/* Modal content */
.modal-content {
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
    width: 100%; /* Width in proportion to its parent container*/
    max-width: 640px; /* Max width where it stops expanding */
    height: 100%; /* Height in proportion to its parent container */
    margin: auto; /* Auto margin according to the element width */
    padding: 10px;
    /* border: 1px solid black; */
    z-index: 1;
    position: fixed;

    border-radius:10px;
    background-size: cover;

    background-image: url('https://www.zwodnik.com/media/images/adobe-reader_windows.png')
}
/* Close button */
.close {
   color: black;

   float: right; /* Positioned to the right of the parent container whichever size it is */
   float: top;
   font-size: 30px !important;
   font-weight: bold;
}
.close:hover, 
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}


div.modal-flex {
    /* overflow: auto; */
    background-size: contain;
    background-color: white;
    width: 100%; /* Width in proportion to its parent container*/
    height: 100%; /* Height in proportion to its parent container */
    margin-top: 20px!important;
    margin: auto; 
    border: 1px solid black;
    z-index: 1;
    overflow: contain;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: center;
    align-items: flex-start;

  }

div.resume-container{
    overflow: auto;
    position: absolute;

}

div.modal-resume{
    /* background-size: contain; */
    margin-bottom:45px;

    position: relative;
    min-width: 100%;
    min-height: 100%;
    padding-bottom: 50px;
    order: 0;
    /* flex: 1 1 auto; */
    align-self: stretch;
    background-repeat: no-repeat;
    /* background-image: url('/Users/anthonychoi98/Documents/GitHub/portfolio/src/images/resumetemp.jpg'); */

}

span.close{
    padding-right:20px;
    padding-bottom:35px;
    margin-top:-8px;
}