Отрегулируйте высоту div в зависимости от содержимого внутри div

Question

Так что сейчас я абсолютно ужасен в CSS и мне интересно, как я могу установить высоту div в качестве высоты содержимого внутри.

iv я пробовал различные способы, основанные на другие вопросы, связанные со стековым потоком, безуспешно предлагают, так что, должно быть, дело в том, как я структурирую 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>

И поддерживающий S css выглядит так:

.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

Как оказалось, я применял

height: fit-content;

к div --details, когда он должен был быть добавлен в класс __main