根據 div 內的內容調整 div 的高度

Question

所以我現在在 CSS 方面非常糟糕，我想知道如何將 div 的高度設置為其中內容的高度。

iv根據其他stackoverflow問題的建議嘗試了多種方法，但沒有運氣，因此必須歸結為我在react應用程序中構造html的方式。

html的結構看起來像這樣

<div className="OrderDetails">
      <div className="OrderDetails__main">
        {
          isFetching
            ? (<Loader message="Fetching Order Details" />)
            : (
              <>
                <div className="OrderDetails__main--header">
                  <h5 className="pt-2">{`Details For Order: ${orderDetails.purchaseOrderNumber}`}</h5>
                  <h5 className="pt-2">{`Order Placed: ${moment(orderDetails.orderPlacedAt).format(DateFormats.dayMonthYearHourMinuteV2)}`}</h5>
                  <h5 className="pt-2">{`Order Status: ${orderDetails.orderStatus}`}</h5>
                </div>
                <div className="OrderDetails__main--details">
                  <div className="OrderDetails__main--section py-3">

                  </div>
                  <div className="OrderDetails__main--section px-2 py-3">

                  </div>
                  <div className="OrderDetails__main--section py-3">

                  </div>
                </div>
              </>
            )
        }
      </div>
    </div>

並且支持的 Scss 看起來像這樣

.OrderDetails {
  display: flex;
  width: 100vw;
  height: 100vh;

  &__main {
    width: 95vw;
    height: 50vh;
    border: 1px solid lightgray;
    border-radius: .5rem;
    margin: 2rem auto;

    &--header {
      display: flex;
      justify-content: space-between;
      height: 5vh;
      width: 90vw;
      margin: .5rem auto;
      border-bottom: 1px solid lightgray;
    }

    &--details {
      display: flex;
      width: 90vw;
      margin: .5rem auto;
      justify-content: space-between;
    }

    &--section {
      width: 28vw;
      height: inherit;
    }
  }
}

對此的任何幫助將不勝感激，因為我出於某種原因沒有運氣。 提前干杯，克里斯。

Answer 1

事實證明我正在申請

高度：適合內容；

當它應該添加到 __main 類時添加到 --details div