Как заставить Div Content занять доступное пространство, когда другой элемент внутри него меняет размер? ⇐ CSS

[Anonymous]

Long Story (надеюсь) коротко, у меня есть Div, который представляет собой «липкий заголовок» с несколькими компонентами внутри него, «основные» два из которых являются контейнером для элемента «панировочных крошек» и один для элемента навигации (Каждый из которых имеет детские элементы внутри). < /p>
Моя проблема заключается в том, что когда элемент хлебной крошки слева начинает расти, а не толкать элемент навигации вправо, где достаточно Экранная недвижимость, вместо этого она движется за экраном влево, как это ... < /p>
"Нормальная хлебная рубашка" < /p>

"Хлебня с еще одним значением"

Я хочу меню навигации (начинается с "Home", "," Правительство "и т. Д.), чтобы двигаться вправо, когда панировочные сухари растут, и займите часть этого пространства, показанного здесь:
< /p>
Я не достаточно опытен с CSS, чтобы запустить эту проблему до его корня, хотя я действительно пытался. Вот что я надеюсь, что вся информация, которая будет полезна для помощи мне: < /p>
Элементы на странице: < /p>

Код: Выделить всё

[list]

[/list]






< /code>
"липкий заголовок" Определение: < /p>
/* HEADER SECTION | NAVIGATION */
.sticky-header {
/* To make the header sticky */
position: sticky;
top: 0px;
background-color: #F0F0F0;
padding: 0px 0px;
height: 60px;
z-index: 1000;
white-space: nowrap;
border: none;

.content {
height: 200vh;
}

/* To center the navigation container */
display: flex;
justify-content: center;
align-items: center;
align-content: center;
}
< /code>
"col-lg-6" Определение: < /p>
.col-lg-5,
.col-lg-6 {
flex: 0 0 auto;
width: 41.66666667%
}

.col-lg-6 {
width: 50%
}
< /code>
"d-none" Определение: < /p>
.d-none {
display: none !important
}
< /code>
"d-xl-block" Определение: < /p>
.d-xl-block {
display: block !important
}
< /code>
"Desktop-nav" Определение: < /p>
.desktop-nav {
display: flex;
align-items: top;
justify-content: center
}
< /code>
"Контейнер-lg" Определение: < /p>
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
width: 100%;
padding-right: calc(var(--bs-gutter-x)*.5);
padding-left: calc(var(--bs-gutter-x)*.5);
margin-right: auto;
margin-left: auto
}
< /code>
"хлебная карабликация" Определение: < /p>
.breadcrumb-section {
padding: 5px 0px 12px;
display: flex;
align-items: center;
justify-content: center;
}

Любая помощь будет бесконечно оценена!

Подробнее здесь: https://stackoverflow.com/questions/793 ... -inside-of