如何将一个 div 放入模态的另一个 div

Question

我正在开发一个反应应用程序，并且我有一个模式，其中道具是一个孩子。这个孩子将在模态框内渲染为模态体。我的问题是模态体不适合模态。我在几个小时内一直在更改 CSS，但找不到解决问题的解决方案。这是我的代码：

这是模态组件（重要的是模态的主体你不必全部都了解）：

import { Fragment } from "react"

interface Props {
  title: string;
  children?: React.ReactNode;
  isForm?: boolean;
  closeModal: () => void;
  acceptModal?: () => void;
}

const Modal: React.FC<Props> = ({title, children, isForm=false, closeModal, acceptModal}) => {
    return(
      <Fragment>
        <div className="modal_container">
          <div className="modal_content">

            <div className="modal_header">
              <h4>{title}</h4>
              <button role="header_close_modal" 
                  onClick={closeModal}>
                X
              </button>
            </div>

            <div className="modal_body">
              {children}
            </div>

            <div className="modal_footer">
              <input className="modal_accept" 
                  type={isForm ? "submit" : "button"}
                  role="accept_modal"
                  onClick={isForm ? null : acceptModal}
                  value="Accept" />
              <button className="modal_cancel" 
                  role="footer_close_modal"
                  onClick={closeModal}>
                Cancel
              </button>
            </div>

          </div>
        </div>
        <style jsx>
        {`
          .modal_container{
            width: 100%;
            height: 100%;
            position: fixed;
            background-color: rgb(216 216 216 / 0.6);
            z-index: 10;
            display: flex;
            justify-content: center;
            align-items: center;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
          .modal_content{
            background-color: #ffffff;
            min-width: 40vw;
            height: 30vh;
            display: flex;
            flex-wrap: wrap;
            box-shadow: 1px 1px 10px 1px grey;
            display: flex;
            flex-direction: column;
          }
          .modal_header{
            height: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            border-bottom: 1px solid #d2d2d2;
          }
          .modal_header button,
          .modal_header input[type="button"],
          .modal_header input[type="submit"]{
            border: none;
            background-color: transparent;
            cursor: pointer;
            font-weight: 600;        
          }
          .modal_body{
            flex-grow: 1;
            display: inline-block;
          }
          .modal_footer{
            display: flex;
            height: 30px;
            justify-content: flex-end;
            padding: 0 10px;
            align-items: center;
          }
          .modal_footer button,
          .modal_footer input[type="button"],
          .modal_footer input[type="submit"]{
            cursor: pointer;
            background-color: transparent;
            border: none;
            padding: 0 15px;
            height: 25px;
          }
          .modal_footer input[type="submit"].modal_accept,
          .modal_footer input[type="button"].modal_accept{
            background-color: #239623;
            color: #fff;
            margin-right: 5px;
          }
          modal_footer input[type="submit"].modal_accept:hover,
          modal_footer input[type="button"].modal_accept:hover{
            background-color: #1e7c1e;
          }
          .modal_footer .modal_cancel{
            background-color: #868686;
            color: #fff;
          }
          .modal_footer .modal_cancel:hover{
            background-color: #757575;
          }
          .modal_footer button:focus,
          .modal_footer input[type="button"]:focus,
          .modal_footer input[type="submit"]:focus{
            outline: none;
          }
        `}
        </style>
      </Fragment>
    );
}

export default Modal

这是调用模态的父组件：

{ showModal && (
            <Modal title={rule.title} closeModal={() => {setShowModal(false)}}>
                <div className="wrap">
                    <h1>Description</h1>
                    <div className="card">
                        <p>{rule.description}</p>
                    </div>
                    <h1>Mitigation</h1>
                    <div className="card">
                        <p>{rule.mitigation}</p>
                    </div>
                </div>
            </Modal>)}

以及父组件的CSS：

.card {
                background: #fff;
                box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
                padding: 3px 10px;
                font-size: 12px;
                margin-bottom: 6px;
                border-radius: 3px;
                display: flex;
                align-items: center;
                justify-content: space-between; 
            }

            .wrap {
                background: #e8e8e8;
                border-radius: 4px;
                padding: 5px;
                max-width: 1000px;
                width: 100%;
                box-sizing: border-box;
                display: inline-block;
            }
            
            h1 {
                font-size: 1.5em;
                font-weight: bold;
                margin-bottom: .5em;
            }
            
            p {
                margin-bottom: 2em;
                color: #666;
            }

这是结果：

有谁知道我怎样才能使身体适应模态？谢谢！！

Answer 1

.card {
    background: #fff;
    box - shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    padding: 3px 10px;
    font - size: 12px;
    margin - bottom: 6px;
    border - radius: 3px;
    display:flex;
    flex-direction: column;
}

Answer 2

解决方案是从 modal_content 中删除 min-width 和 height，如下所示：

.modal_content{
        background-color: #ffffff;
        display: flex;
        flex-wrap: wrap;
        box-shadow: 1px 1px 10px 1px grey;
        display: flex;
        flex-direction: column;
      }

谢谢！