Bootstrap 4 CSS Dynami c Высота родительского Div

Question

Мой вопрос касается представления рабочего стола в приведенном ниже примере.

В CSS моего примера я использую стиль ".primaryNav", чтобы заставить основной навигационный div быть высотой его содержимое, которое включает горизонтальную суб-навигацию.

.primaryNav {
  background-color: red;
  height:148px;
}

Я бы предпочел не определять высоту CSS и позволить содержимому div делать всю работу. Таким образом, у меня не будет пробелов и пробелов из-за отзывчивых шрифтов и отдельных точек останова. Есть ли способ изменить мой CSS, чтобы сделать div класс классифицированным .primaryNav динамически расширяться до высоты его содержимого?

Я боролся в течение нескольких недель и не могу помочь, но мне кажется, я упускаю из виду нечто очевидное.

#topNav {
  letter-spacing: .06rem;
}

#topNav a.nav-link {
  padding: 0.05rem 0.5rem;
  color: white;
  font-weight: 300;
  font-size: 0.75rem;
}

#topNav a.nav-link:hover {
  text-decoration: underline;
}

#topNav a.nav-link.wpLink {
  font-weight: 800;
  font-size: .9rem;
}

.primaryNav {
  background-color: red;
  height: 148px;
}

#mainNav .mainSearch .form-control {
  border-left: 0;
}

#mainNav .input-group-text {
  background-color: white;
  border-right: 0;
  padding-right: 0;
}

@media (min-width: 576px) {
  #mainNav {
    font-size: 1rem;
    line-height: 1rem;
    font-weight: 800;
  }
  #mainNav .nav-link {
    min-height: 65px;
  }
}

@media (min-width: 768px) {
  #mainNav {
    color: #000;
    font-weight: 800;
  }
  #mainNav .nav-link,
  #mainNav .nav-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  #mainNav,
  #mainNav .collapse,
  #mainNav .nav-link {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }
  #mainNav .navbar-nav {
    -ms-flex-pack: distribute;
    justify-content: space-around;
    width: 100%;
  }
  #mainNav .nav-link span {
    -ms-flex-item-align: center;
    align-self: center;
  }
  #mainNav .nav-link:active,
  #mainNav .nav-link:focus,
  #mainNav .nav-link:hover {
    color: black;
    border-bottom: 3px solid black;
  }
  #mainNav .active .nav-link {
    border-bottom: 3px solid #0075C9;
  }
  #mainNav .dropdown {
    position: static;
  }
  #mainNav .dropdown-menu {
    display: none;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    border-top: 1px solid grey;
    background: white;
  }
  #mainNav .dropdown-menu.in,
  #mainNav .active .dropdown-menu,
  #mainNav .dropdown:hover .dropdown-menu {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  #mainNav .dropdown-item {
    padding: 1rem 2rem;
    width: auto;
  }
  #mainNav .dropdown-item:hover,
  #mainNav .dropdown-item:focus,
  #mainNav .dropdown-item.active,
  #mainNav .dropdown-item:active {
    color: #000;
    text-decoration: none;
    background-color: #F2F2F2;
  }
}

@media (min-width: 1200px) {
  #mainNav {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}