Попытка сделать так, чтобы меньшие предметы соответствовали той же высоте, что и большие коробки. ⇐ Html

[Anonymous]

ИСПОЛЬЗОВАНИЕ BOOTSTRAP И SCSS: большие статьи и пара меньших статей должны соответствовать друг другу по высоте, независимо от количества контента в них.
В настоящее время, когда большие статьи располагаются рядом с маленькими статьями, между следующим набором статей возникает разрыв. Вторая небольшая статья не растягивается автоматически на пространство. Мне нужно, чтобы элементы div растягивались, чтобы соответствовать высоте больших элементов div.

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

/*Here is the SCSS */
.big-news {
padding: 4rem 0;
display: flex;
flex-direction: column;

.row {
height: 100%;
}

.small-news-items {
display: flex;
flex-direction: column;
height: 100%;

.row {
flex: 1;
height: 100%;
}

.small-new-container {
height: calc(100% - 2rem);
display: flex;
}
}

.btn {
.news-caret {
transition: transform 0.3s ease;
}

&:hover .news-caret {
transform: translateX(5px);
}
}

.news-card {
display: block;
text-decoration: none;
color: inherit;
height: 100%;
position: relative;
overflow: hidden;
transition: transform 0.3s ease;

&:hover {
.news-img-wrapper img {
transform: scale(1.05);
}

.news-caret {
transform: translateX(5px);
}
}

.news-img-wrapper {
overflow: hidden;

img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
}

.news-content {
position: relative;

.news-title {
font-weight: 300;
line-height: 1.3;
margin-bottom: 0.5rem;
}

.news-text {
font-size: 2rem;
line-height: 1.4;
color: #555;
}

.news-caret {
position: absolute;
bottom: 1rem;
right: 1rem;
color: $primary;
transition: transform 0.3s ease;
}
}

&-large {
height: 100%;
display: flex;
flex-direction: column;

.news-img-wrapper {
flex: 1;
height: 100%;
// @media screen (min-width: 992px) {
//   height: 350px;
// }
}

.news-content {
.news-title {
font-size: 1.5rem;
}
}
}

&-small {
display: flex;
flex-direction: row;
height: 100%;

.news-img-wrapper {
width: 40%;
min-width: 40%;

img {
width: 100%;
height: 100%;
object-fit: cover;
}
}

.news-content {
width: 60%;
display: flex;
flex-direction: column;
flex: 1;

.news-text {
font-size: 1.3rem;
margin-bottom: 1.5rem;
}
}
}
}

@media (max-width: 991.98px) {
.news-card-small {
margin-bottom:  1.5rem;
}
}
}

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

[url=#]

[i]                  alt="Celebrate the ribbon cutting of new Crestview office">


HEADER HERE

[/i]

[/url]





[url=#]

[img]https://picsum.photos/id/237/200/200[/img]

ADD HEADER IN RIGHT HERE

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus id eveniet quaerat beatae
maiores, fugit rerum sequi
ea sed alias corporis eius asperiores minima? Consectetur neque ipsam odit vero dolorem, dicta
quisquam.

[/url]


[url=#]

[img]https://picsum.photos/id/237/200/200[/img]

ADD HEADER IN RIGHT HERE

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus id eveniet quaerat beatae
maiores, fugit rerum sequi
ea sed alias corporis eius asperiores minima? Consectetur neque ipsam odit vero dolorem, dicta
quisquam.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Accusamus id eveniet quaerat beatae
maiores, fugit rerum sequi
ea sed alias corporis eius asperiores minima? Consectetur neque ipsam odit vero dolorem, dicta
quisquam.

[/url]

Подробнее здесь: https://stackoverflow.com/questions/796 ... arge-boxes