html - 根据 div 中的内容调整 div 的高度

问题描述

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

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

标签： htmlcssreactjssass

html - 根据 div 中的内容调整 div 的高度

问题描述

解决方案

推荐阅读