在您的示例中，您必须将鼠标悬停在p元素上，子元素将展开或显示，但是当您从p元素释放光标时，子元素将隐藏，因此请尝试以下代码并更改一些代码结构以满足您的要求。

.flex-container {
        display: flex;
        justify-content: space-evenly;
        flex: auto;
    }

    .flex-container>div {
        background-color: #f1f1f1;
        width: 100%;
        margin: 10px;
        line-height: 15px;
        font-size: 15px;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }

    .child {
        display: none;
        position: relative;
    }

    .main {
        padding: 10px;
    }

    .main p {
        margin: 0;
    }

    .main:hover>.child {
        display: block;
        color: red;
        background-color: yellow;
        z-index: 1;
        margin-top: 10px;
    }

<div class="flex-container">
        <div class="wrapper">
            <div class="main">
                <p class="main-test">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                </p>
                <div class="child">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, possimus, a! Accusantium temporibus culpa neque ullam libero ipsam, nesciunt id quisquam omnis, possimus error praesentium eum earum dignissimos, quaerat numquam!
                    </p>
                </div>
            </div>
            <div class="main">
                <p class="main-test">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                </p>
                <div class="child">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, possimus, a! Accusantium temporibus culpa neque ullam libero ipsam, nesciunt id quisquam omnis, possimus error praesentium eum earum dignissimos, quaerat numquam!
                    </p>
                </div>
            </div>
            <div class="main">
                <p class="main-test">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                </p>
                <div class="child">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, possimus, a! Accusantium temporibus culpa neque ullam libero ipsam, nesciunt id quisquam omnis, possimus error praesentium eum earum dignissimos, quaerat numquam!
                    </p>
                </div>
            </div>
        </div>
        <div class="wrapper">
        </div>
    </div>