有沒有可能讓懸停元素不向下推動其他元素，從而擴展整個flexbox，而是讓它覆蓋其他元素，并用它的主體隱藏它們？

我試過z-index但是沒有成功。

.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:hover+.child {
  display: block;
  color: red;
  background-color: yellow;
  z-index: 1;
}

<div class="flex-container">
  <div class="wrapper">
    <p class="main">
      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>
    <p class="main">
      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>
    <p class="main">
      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="wrapper"></div>
</div>

在您的示例中，您必須將鼠標懸停在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>