根据 div 内的内容调整 div 的高度答案

【问题标题】：Adjust height of div to be based on content within div根据 div 内的内容调整 div 的高度
【发布时间】：2020-02-24 20:05:43
【问题描述】：

所以我现在在 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;
    }
  }
}

对此的任何帮助将不胜感激，因为我由于某种原因没有运气。提前喝彩，克里斯。

【问题讨论】：

标签： html css reactjs sass

【解决方案1】：

事实证明我正在申请

身高：适合内容；

应该添加到 __main 类的 --details div

【讨论】：