html – Adjust height of div to be based on content within div-ThrowExceptions

Exception or error:

So I’m absolutely terrible at CSS right now and im wondering how i can set the height of the div to be the height of the content within.

iv tried a variety of ways based on what other stackoverflow questions are suggesting with no luck so it must be down to the way im structuring the html in the react application.

The structure of the html looks like so

<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>

And the supporting Scss looks like so

.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;
    }
  }
}

Any help on this would be appreciated as im having no luck for some reason.
Cheers in advance,
Chris.

How to solve:

As it turns out I was applying

height: fit-content;

to the –details div when it should have been added to the __main class

Leave a Reply

Your email address will not be published. Required fields are marked *