Имеется такой дизайн:
Как видите, есть переполнение справа, нужно, чтобы этот блок заканчивался там же, где и блок слева.
Попытался установить блоку справа overflow: auto
, но обрезается часть ниже красной линии
Можно ли сделать так, чтобы весь правый блок скролился, не обрезая нижнюю часть?
body,
html {
margin: 0;
padding: 0;
}
.menu_jobs_desktop {
/* display: grid; */
/* align-self: center; */
overflow: hidden;
/* overflow-y: auto; */
margin-left: 181px;
width: 354px;
}
.menu_jobs_desktop_content {
background: #181818;
width: calc(100% + 20px);
overflow: auto;
height: 630px;
}
.menu_jobs {
position: absolute;
top: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
background: #181818;
display: none;
flex-direction: column;
align-items: center;
}
.menu_jobs_item_answer {
font-size: 11px;
font-weight: 500;
background: white;
margin-top: 12px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px; }
.menu_jobs_title {
color: white;
font-size: 22px;
width: 224px;
margin-top: 72px;
margin-bottom: 24px; }
.menu_jobs_item {
box-sizing: border-box;
width: 224px;
position: relative;
margin-bottom: 18px; }
.menu_jobs_item:before {
border: 1px solid white;
content: "";
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
border-radius: 12px; }
.menu_jobs_item:last-child {
margin-bottom: 0; }
.menu_jobs_item_title {
font-weight: bold;
padding-top: 11px;
margin-left: 11px;
margin-bottom: 6px;
font-size: 12px;
line-height: 18px;
color: white; }
.menu_jobs_item_demand {
font-weight: 400;
margin-left: 11px;
font-size: 12px;
color: white;
line-height: 18px; }
.menu {
align-items: center;
justify-content: center;
display: flex;
position: absolute;
width: 100vw;
overflow: hidden;
height: 100vh;
background: #181818;
z-index: 1000;
opacity: 1;
transition-property: opacity;
transition-duration: .5s;
font-family: 'Montserrat', sans-serif;
}
.menu__contacts_d__wrapper {
width: 408px; }
.header__wrap-menu-block {
cursor: pointer; }
.menu__container {
position: relative;
width: 180px;
text-align: left;
color: white; }
.menu__item {
box-sizing: border-box;
font-family: 'Montserrat';
font-weight: 500;
cursor: pointer;
position: relative;
white-space: nowrap;
display: inline-block;
padding: 9px 10px;
height: 38px;
margin-bottom: 14px;
font-size: 16px; }
.menu__item:nth-of-type(7) {
width: 100%;
margin-bottom: 0; }
.menu__item:last-of-type {
padding-left: 10px;
padding-top: 14px;
padding-right: 32px;
position: relative;
margin-top: 20px;
margin-bottom: 0px;
height: 44px; }
.menu__triangle {
margin-left: 10px; }
.menu__item__rectangle {
width: 0;
position: relative;
height: 2px;
top: 7px;
background: white;
transition-property: width;
transition-duration: .5s;
transition-timing-function: ease-in; }
.menu__item__text {
line-height: 20px;
display: inline-flex;
align-items: center; }
.menu__back {
position: absolute;
top: 6px;
left: 6px;
font-family: 'Montserrat';
font-size: 14px;
font-weight: bold;
width: 115px;
height: 36px;
color: #8c8c8c;
opacity: 0;
transition-property: opacity;
transition-duration: .3s;
display: flex;
align-items: center;
justify-content: center; }
body {
touch-action: none; }
.menu__main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
@media (min-width: 360px) {
.menu_jobs_title {
margin-top: 82px;
margin-bottom: 28px;
font-size: 26px;
width: 248px; }
.menu_jobs_item {
width: 248px;
margin-bottom: 20px; }
.menu_jobs_item_title {
padding-top: 13px;
margin-left: 13px;
font-size: 13px;
line-height: 20px;
margin-bottom: 7px; }
.menu__item {
font-size: 18px;
margin-bottom: 16px;
padding: 10px;
height: 42px; }
.menu__item__text {
height: 22px; }
.menu__item:last-of-type {
width: 203px;
margin-top: 40px;
height: 50px; }
.menu__triangle {
width: 14px;
height: 14px;
margin-left: 14px; }
.menu__container {
width: 203px; }
.menu__item__rectangle {
top: 8px; }
@media (min-width: 768px) {
.menu_jobs_item_answer {
height: 40px;
font-size: 14px;
line-height: 21px;
margin-top: 18px; }
.menu_jobs_title {
margin-top: 112px;
width: 408px;
font-size: 30px;
margin-bottom: 36px; }
.menu_jobs_item_demand {
font-size: 17px;
margin-left: 17px;
line-height: 26px; }
.menu_jobs_item {
border-radius: 14px;
width: 408px;
margin-bottom: 24px; }
.menu_jobs_item_title {
padding-top: 17px;
margin-left: 17px;
line-height: 26px;
font-size: 17px;
margin-bottom: 9px; }
.menu__item {
font-size: 24px;
height: 54px;
margin-bottom: 23px;
padding: 12px; }
.menu__container {
width: 271px; }
.menu__item:last-of-type {
margin-top: 105px;
width: 271px;
height: 64px; }
.menu__triangle {
top: 23px;
right: 14px; }
}
@media (min-width: 768px) {
.menu__question__title {
font-size: 30px;
margin-bottom: 50px; }
.menu__question__introduce, .menu__question__contacts {
margin-bottom: 25px; }
.menu__item {
font-size: 24px; }
.menu__container {
width: 271px; }
.menu__item:last-of-type {
margin-top: 105px;
padding-top: 17px;
padding-left: 12px;
width: 271px; }
.menu__triangle {
margin-left: 20px;
width: 20px;
height: 20px; }
.menu__contacts_d__content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%; }
.menu__question__active {
font-size: 11px !important; }
.menu__question__comment__wrapper {
width: 100%;
height: 141px; }
.menu__question__comment_text {
font-size: 14px; }
.menu__question__send {
float: right;
width: 129px;
font-size: 14px; }
.menu__contacts__phone {
margin-top: 82px;
font-size: 22px;
margin-bottom: 12px; }
.menu__contacts__email {
font-size: 14px;
margin-bottom: 24px;
height: auto; }
.menu__contacts__years {
font-size: 16px; }
.menu__item__rectangle {
top: 12px; }
.menu__item:nth-of-type(7) .menu__item__rectangle {
top: 13px; }
.menu__thanks-back {
margin-bottom: 60px;
border-radius: 29px; }
.menu__thanks-back-text {
font-size: 18px;
padding: 17px 95px;
text-transform: uppercase; }
.thanks__title-text {
font: 600 66px 'Montserrat Alternates'; }
.thanks__title-descr-text {
font: 500 22px / 29.7px 'Montserrat Alternates'; }
.thanks__title-descr {
width: 340px; }
.menu__projects_d__item_type {
position: absolute;
bottom: 0; }
.menu__projects_d__item_type::before {
z-index: -1;
position: absolute;
content: "";
top: 5px;
bottom: 16px;
left: 16px;
right: 16px;
box-shadow: 0px -2px 28px rgba(0, 0, 0, 0.25); }
.menu__projects_d__item {
box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.252038);
height: 345px; }
.menu__projects_d__item_img {
height: 301px; } }
@media (min-width: 1024px) {
.menu_jobs_item_title {
font-size: 16px;
line-height: 1.5;
padding-top: 18px;
margin-left: 18px; }
.menu_jobs_item_demand {
font-size: 16px;
line-height: 24px; }
.menu_jobs_item {
width: 374px;
margin-bottom: 27px; }
.menu_jobs_item_answer {
height: 57px;
color: black; }
.menu_jobs_desktop {
width: 374px; }
.menu_jobs_desktop_content {
height: 486px;
}
.menu_jobs_title {
margin-top: 0;
width: 100%; }
.menu__item__rectangle {
top: 8px; }
.menu__item:nth-of-type(7) .menu__item__rectangle {
top: 12px; }
.menu__container {
display: flex;
justify-content: flex-start;
position: relative;
left: -10px;
width: 758px;
height: 486px; }
.menu__item {
font-size: 18px;
height: 42px;
margin-bottom: 22px;
padding: 10px; }
.menu__item__text {
font-size: 18px; }
.menu__item:nth-of-type(6) {
margin: 0; }
.menu__item:nth-of-type(7) {
width: 203px;
padding-top: 14px;
padding-left: 10px;
margin-top: 74px;
height: 50px; }
.menu__triangle {
margin-left: 14px;
width: 14px;
height: 14px; }
}
@media (min-width: 1366px) {
.menu_jobs_desktop {
width: 403px; }
.menu_jobs_desktop_content {
height: 468px; }
.menu_jobs_item {
width: 403px;
min-height: 154px;
max-height: 180px; }
.menu_jobs_item:before {
border-radius: 14px; }
.menu_jobs_item_title {
padding-top: 18px;
margin-left: 18px;
font-size: 17px;
line-height: 1.53; }
.menu_jobs_item_demand {
font-size: 17px;
margin-left: 18px;
line-height: 1.53; }
.menu_jobs_item_answer {
height: 57px;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px; }
.menu_jobs_title {
font-size: 32px;
margin-bottom: 35px; }
.menu_jobs_desktop {
margin-left: 210px; }
.menu__container {
width: 816px;
height: 468px; }
.menu__item:nth-of-type(7) {
margin-top: 56px; }
}
@media (min-width: 1920px) {
.menu__item {
font-size: 20px;
height: 44px;
margin-bottom: 26px; }
.menu__item__text {
font-size: 20px; }
.menu__item:nth-of-type(7) .menu__item__rectangle {
top: 12px; }
.menu__item:nth-of-type(7) {
padding-top: 15px;
padding-left: 11px;
margin-top: 140px;
width: 226px;
height: 54px; }
.menu__triangle {
width: 16px;
height: 16px;
margin-left: 16px; }
.menu__container {
width: 1030px;
height: 589px; }
.menu_jobs_desktop {
margin-left: 300px;
width: 1000000000px; }
.menu_jobs_item {
width: 515px;
margin-bottom: 28px;
min-height: 184px;
max-height: 214px; }
.menu_jobs_title {
font-size: 36px;
margin-bottom: 48px; }
.menu_jobs_item_title {
font-size: 20px;
line-height: 30px;
padding-top: 27px;
margin-left: 24px;
margin-bottom: 12px; }
}
<body>
<div class="menu">
<!-- Главное окно -->
<div class="menu__main">
<div class="menu__main_container">
<div class="menu__container">
<div class="menu_main_left">
<div class="menu__item bg-gray">
<span class="menu__item__text">Проекты</span>
<div class="menu__item__rectangle"></div>
</div><br>
<div class="menu__item bg-gray">
<span class="menu__item__text">Услуги</span>
<div class="menu__item__rectangle"></div>
</div><br>
<div class="menu__item bg-gray">
<span class="menu__item__text">Поддержка</span>
<div class="menu__item__rectangle"></div>
</div><br>
<div class="menu__item bg-gray">
<span class="menu__item__text">Контакты</span>
<div class="menu__item__rectangle"></div>
</div><br>
<div class="menu__item bg-gray">
<span class="menu__item__text">Вакансии</span>
<div class="menu__item__rectangle"></div>
</div><br>
<div class="menu__item bg-gray">
<span class="menu__item__text">О нас</span>
<div class="menu__item__rectangle"></div>
</div><br>
<div class="menu__item bg-gray">
<span class="menu__item__text">Заказать проект
<svg class="menu__triangle" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.2111 6.89444L1.44721 11.2764C0.953235 11.5234 0.352562 11.3232 0.105573 10.8292C0.0361451 10.6903 0 10.5372 0 10.382V1.61804C0 1.06576 0.447715 0.618042 1 0.618042C1.15525 0.618042 1.30836 0.654187 1.44721 0.723615L10.2111 5.10558C10.7051 5.35257 10.9053 5.95324 10.6584 6.44722C10.5616 6.64075 10.4047 6.79767 10.2111 6.89444Z" fill="white" />
</svg>
</span>
<div class="menu__item__rectangle"></div>
</div>
</div>
<!-- Окно "Вакансии" для десктопа -->
<div class="menu_jobs_desktop">
<div class="menu_jobs_desktop_content">
<div class="menu_jobs_title">Вакансии</div>
<div class="menu_jobs_item">
<div class="menu_jobs_item_title">Junior Front-end developer:</div>
<div class="menu_jobs_item_demand">- HTML+CSS3</div>
<div class="menu_jobs_item_demand">- Angular/React/Vue.js</div>
<div class="menu_jobs_item_answer">ОТКЛИКНУТЬСЯ</div>
</div>
<div class="menu_jobs_item">
<div class="menu_jobs_item_title">Junior Back-end developer:</div>
<div class="menu_jobs_item_demand">- .NET/Node.js</div>
<div class="menu_jobs_item_answer">ОТКЛИКНУТЬСЯ</div>
</div>
<div class="menu_jobs_item">
<div class="menu_jobs_item_title">Web-designer:</div>
<div class="menu_jobs_item_demand">- Векторные редакторы (Adobe XD/Figma/Sketch)</div>
<div class="menu_jobs_item_answer">ОТКЛИКНУТЬСЯ</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
UPD:
Блок должен уходить вверх и заканчиваться красной линией
.menu_jobs_desktop { overflow: scroll; }