Html 根据div中的内容调整div的高度

所以我现在对CSS非常糟糕，我想知道如何将div的高度设置为其中内容的高度

我根据stackoverflow问题的其他建议尝试了多种方法，但运气不佳，所以这一定是因为我在react应用程序中构建html的方式

html的结构看起来是这样的

{
吸引人
? ()
: (
{`Order的详细信息：${orderDetails.purchaseOrderNumber}`}
{`Order Placed:${矩（orderDetails.orderPlacedAt）.format（DateFormats.dayMonthYearHourMinuteV2）}`}
{`订单状态：${orderDetails.orderStatus}`}
)
}

而支持SCS的是这样的

.OrderDetails{
显示器：flex；
宽度：100vw；
高度：100vh；
&__主要{
宽度：95vw；
高度：50vh；
边框：1px实心浅灰色；
边界半径：.5rem；
保证金：2rem自动；
&--标题{
显示器：flex；
证明内容：之间的空间；
高度：5vh；
宽度：90vw；
保证金：.5rem自动；
边框底部：1px实心浅灰色；
}
&--细节{
显示器：flex；
宽度：90vw；
保证金：.5rem自动；
证明内容：之间的空间；
}
&--部分{
宽度：28vw；
身高：继承；
}
}
}

在这方面的任何帮助都将不胜感激，因为我因为某种原因没有运气。 提前欢呼,，

---

克里斯。

原来我在申请

高度：适合的内容

当--details div应该被添加到_主类时，将其添加到--details div