Переполнить автоматическое зажигает все [дублировать] ⇐ CSS

[Anonymous]

Я создал несколько карт пользовательского интерфейса. Все выглядит хорошо, за исключением одной незначительной детали. У меня есть четыре карты, и когда вы изменяете размер страницы, появляется прокрутка. Когда это произойдет, синяя лента в верхнем левом углу ручной работы обрезается сверху. Я просмотрел свой код, и если я удалю переполнение-X: Auto , когда показывает прокрутка (под максимальной шириной: 1200px ), тогда лента не обрезана, но моя прокрутка исчезает. Мое ожидание-это переполнение-x , чтобы просто обрезать горизонтально, поэтому верхняя часть моей ленты все еще должна отображаться. Даже если я добавлю переполнение y: visible под максимальной шириной: 1200px Верх Верхняя часть ленты?

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

Class of '99



⭑
Angela Jones
⭑

President
 






Class of '99



⭑
Raul Sanchez
⭑

Vice President
 






Class of '99



⭑
Stacy Peters
⭑

Secretary
Treasurer






Class of '99



⭑
Phil Neighbors
⭑

Outreach
Events







< /code>
css: < /p>
/* Reset */
html {
box-sizing: border-box;
font-size: 16px;
}

*, *:before, *:after {
box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
font-weight: normal;
margin: 0;
padding: 0;
}

ol, ul {
list-style: none;
}

img {
height: auto;
max-width: 100%;
}

/* Section */
section {
background: #fff;
padding: 40px 0;
}

section .container-fluid > .title {
align-items: center;
display: flex;
justify-content: center;
}

section .container-fluid >  .title p {
color: #fff;
content: "\2B51";
font-size: 35px;
margin: 0 20px;
position: relative;
top: -20px;
}

/* Text */
section h2 {
color: #fff;
font-family: "Inter", serif;
font-size: 16px;
letter-spacing: 5px;
margin: 0 0 10px;
padding: 0;
text-align: center;
text-transform: uppercase;
}

section h1 {
color: #fff;
font-family: 'Bebas Neue', sans-serif;
font-size: 80px;
font-weight: bold;
line-height: 75px;
margin: 0 0 50px;
padding: 0;
text-align: center;
text-transform: uppercase;
}

section p.info-sm,
section p.info-lrg {
color: #fff;
font-family: "Inter", serif;
font-size: 16px;
margin: -40px 20px 30px;
text-align: center;
}

/* Media */
@media (max-width: 1118px) {
section p.info-lrg {
display: none;
}
}

@media (min-width: 1119px) {
section p.info-sm {
display: none;
}
}

/* Board */
.board {
position: relative;
}

.board .wrap {
display: flex;
position: relative;
z-index: 1;
}

.board .item {
background: var(--profile-img) no-repeat center / cover;
flex-grow: 1;
height: 500px;
margin: 0 5px;
position: relative;
transition: 0.5s;
}

.board .item:hover {
flex-grow: 1.6;
}

/* Ribbon */
.ribbon {
height: 112px;
left: -10px;
overflow: hidden;
position: absolute;
top: -8px;
width: 112px;
}

.ribbon div {
background: #00214d;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
color: #eef2f9;
display: block;
font-family: "Inter", serif;
font-size: 12px;
font-weight: 700;
left: -35px;
padding: 5px 0;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 25px;
transform: rotate(-45deg);
width: 162px;
}

.ribbon span {
font-size: 16px;
}

.ribbon::before,
.ribbon::after {
border: 5px solid #2C599D;
border-left-color: transparent;
border-top-color: transparent;
content: "";
display: block;
position: absolute;
z-index: -1;
}

.ribbon::before {
right: 0;
top: 0;
}

.ribbon::after {
bottom: 0;
left: 0;
}

.board .info {
background: #fff;
background: linear-gradient(180deg, #fff 0%, transparent 0%, #fff 100%);
bottom: 0;
left: 0;
padding: 15px;
position: absolute;
width: 100%;
}

.board h5 {
color: #fff;
font-size: 1.25em;
font-weight: bold;
margin-bottom: 5px;
position: relative;
text-align: center;
}

.board p {
font-size: 1em;
color: #5b84c4;
font-weight: 500;
margin: 0;
padding: 0;
text-align: center;
}

.board .info > .title {
align-items: center;
display: flex;
justify-content: center;
}

.board .info > .title div:nth-child(1),
.board .info > .title div:nth-child(3) {
color: #fff;
font-size: 1.5em;
padding-bottom: 10px;
text-align: center;
}

.board .info >  .title div:nth-child(2) {
margin: 0 5px;
width: 150px;
}

/* Media */
@media (max-width: 1200px) {
.board {
overflow-x: auto;
padding-bottom: 10px;
}
.board::-webkit-scrollbar {
background: #111;
height: 7px;
width: 10px;
}
.board::-webkit-scrollbar-thumb {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.55, #bbb), color-stop(0.86, #bbb));
border-radius: 10px;
}
.board::-webkit-scrollbar-track {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.55, #444), color-stop(0.86, #444));
border-radius: 30px;
}
.board .wrap {
width: 1100px;
}
.board .item {
height: 500px;
}
}

/* Media */
@media (max-width: 992px) {
.board .wrap {
width: 1000px;
}
.board .item {
height: 350px;
}
.board .item:hover {
flex-grow: 1.5;
}
}

/* Media */
@media (max-width: 768px) {
.board .item {
height: 300px;
}
}

codepen: https://codepen.io/joshrodgers/pen/ogvkpmx


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