Как я могу заставить свой div использовать липкое позиционирование? ⇐ CSS

[Anonymous]

У меня контент в двух столбцах. Родительский элемент двух столбцов гибко растягивается, и каждому столбцу присваивается заданная ширина.
Содержимое правого столбца длиннее левого.
Внутри левого столбца у меня есть оболочка для его содержимого с высотой, установленной на 100%.
Содержимое представляет собой блочный элемент с положением:sticky, top:0.
Этого просто не будет палка! Я выполнил все предложения, которые нашел в Интернете, и, похоже, абсолютно ничего не помогло.
Вот HTML:

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

Agent Name




[i]

[url=mailto:agent@agency.co.nz]
 agent@agency.co.nz[/url]
[url=tel:1234567] 1234567[/url]
[url=https://sandbox.graphicdetail.co.nz/contact/][/i] Contact Agent[/url]





Sales & Marketing Consultant

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac mi massa. Donec malesuada gravida leo, a condimentum orci ultricies vitae. Aliquam id dapibus nisi. Pellentesque posuere ullamcorper mattis. Vivamus nisi arcu, tincidunt at lectus vitae, aliquam hendrerit mauris.  Mauris vel mi pretium, luctus massa id, vulputate quam. Phasellus at venenatis ante. Vestibulum a mi sed lectus pretium pretium a nec nunc.
Vestibulum odio nisl, congue in tincidunt nec, vehicula at est. Nullam orci neque, mollis vel venenatis ut, dignissim quis diam. Nunc sollicitudin, felis non venenatis rutrum, nibh felis maximus metus, sed viverra ante dui quis leo. Sed accumsan, augue sed fringilla accumsan, metus erat tincidunt dolor, eu elementum tortor nulla sit amet eros. Cras nec augue ac urna luctus fringilla. Praesent vel felis efficitur, lobortis turpis quis, accumsan tellus. Duis dapibus diam eget nisi semper, facilisis imperdiet est rhoncus. Phasellus viverra auctor dolor, at varius justo interdum eu. In ut orci sapien. Vivamus imperdiet pulvinar dapibus. Maecenas ac lorem felis. Etiam a libero vitae ligula malesuada aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Sed rhoncus elementum ipsum quis mattis. Vestibulum porttitor ipsum eu dolor faucibus, et sollicitudin odio ornare. Suspendisse id lectus eu massa imperdiet pretium eu ut ipsum. Praesent non odio in odio sollicitudin pellentesque quis id tellus. Cras id leo nec dui ullamcorper egestas. Mauris eu vehicula ligula, sit amet tristique diam. Integer placerat a neque vel accumsan. Sed ut mattis ipsum. Fusce vulputate lacus in tempus semper. Donec a tellus mauris. Nunc laoreet lorem ut erat tincidunt, vel imperdiet mi hendrerit. Vivamus sollicitudin diam non eleifend tempus. Praesent scelerisque nibh eget nulla egestas rutrum. In sapien dui, viverra quis ultrices tincidunt, convallis in odio. Nullam aliquet, arcu ut porta interdum, diam nulla sagittis quam, eget consectetur erat nulla vitae lorem. Fusce pellentesque lorem eget urna fringilla, at convallis nibh aliquam.

А вот CSS:

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

.single_agent_header_content {
display: flex;
column-gap: 72px;
border-top: solid 1px #595959;
border-bottom: solid 1px #595959;
}

.single_agent_header_left {
width: 33.33%;
max-width: 500px;
}

.single_agent_header_left_content_wrapper {
height: 100%;
}

.single_agent_header_left_content {
position: sticky;
position: -webkit-sticky;
top: 0;
}

.single_agent_header_right {
flex-grow: 1;
width: 66.66%;
padding: 72px 0;
}

.single_agent_position {
background: #efeee3;
display: inline-block;
font-weight: 300;
text-transform: uppercase;
line-height: 1.3846153846;
letter-spacing: .25em;
padding: .75rem 1.25rem;
border-radius: 1.25rem;
color: #6a6a6a;
margin-bottom: 50px;
}

.single_agent_profile {
font-size: 1.125rem;
line-height: 1.6;
color: #595959;
}

.single_agent_name {
color: #595959;
margin-bottom: 65px;
font-size: 80px;
font-weight: 400;
}

.single_agent_photo {
margin-bottom: 20px;
}

.single_agent_contact_details svg, .single_agent_contact_details i::before {
width: 24px;
min-width:24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
}

.single_agent_request_appraisal,
.single_agent_email,
.single_agent_phone {
display: flex;
align-items: center;
margin-bottom: 20px;
text-transform: uppercase;
color: #595959;
}

.single_agent_request_appraisal:hover,
.single_agent_email:hover,
.single_agent_phone:hover {
color: #595959;
}

.single_agent_contact_text::after {
content: " ";
display: block;
height: 2px;
background: #595959;
width: 0%;
transition: width 0.3s ease;
}

.single_agent_request_appraisal:hover .single_agent_contact_text::after,
.single_agent_email:hover .single_agent_contact_text::after,
.single_agent_phone:hover .single_agent_contact_text::after {
width: 100%;
transition: width 0.3s ease;
}

Я также пробовал добавить «overflow:visible;» на .single_agent_header_left_content_wrapper и установите для .single_agent_header_left_content_wrapper значение Position:relative. Это не имеет значения.
Где я ошибся? (Без сомнения, это будет что-то глупое и крошечное).
Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/797 ... ositioning