How to make two column flex divs align to the bottom of a website
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
I have two divs which need to be aligned next to each other, but also grow to fit the website (downwards) the two divs
I would like the divs to go all the way to the bottom / fit the content.
I can’t seem to figure it out and have resulted in stacking them instead of using a column, which looks good on a smaller display but feels weird on a desktop.
Hopefully, someone can help.
Cheers.
/* rough translation of the css (but you get the gist) */
:root {
—tds-size—3x: 24px;
—tds-gutter-negative: calc(24px * – 1);
—tds-size—2x: 16px;
—tds-card—border-radius: 8px;
—ids-flex-nm: 1;
}
.tds-flex-gutters {
-webkit-margin-before: var(–tds-gutter–negative);
margin-block-start: var(–tds-gutter–negative);
-webkit-margin-after: var(–tds-size–3x);
margin-block-end: var(–tds-size–3x);
-webkit-margin-start: var(–tds-gutter–negative);
margin-inline-start: var(–tds-gutter–negative);
}
@media (min-width: 600px) {
.tds-flex {
flex-flow: row wrap;
}
}
.tds-flex {
display: flex;
flex-flow: column wrap;
list-style: none;
margin: 0;
padding: 0;
}
:root {
—tds-size—3x: 24px;
—tds-gutter-negative: calc(24px * – 1);
—tds-size—2x: 16px;
—tds-card—border-radius: 8px;
—ids-flex-nm: 1;
}
.tds-flex-gutters {
-webkit-margin-before: var(–tds-gutter–negative);
margin-block-start: var(–tds-gutter–negative);
-webkit-margin-after: var(–tds-size–3x);
margin-block-end: var(–tds-size–3x);
-webkit-margin-start: var(–tds-gutter–negative);
margin-inline-start: var(–tds-gutter–negative);
}
@media (min-width: 600px) {
.tds-flex {
flex-flow: row wrap;
}
}
.tds-flex {
display: flex;
flex-flow: column wrap;
list-style: none;
margin: 0;
padding: 0;
}
.my-card[_ngcontent-ylf-c110] {
margin-left: 35px;
margin-top: 25px;
width: 100%;
background-color: #fff;
box-shadow: 0 4px 8px rgb(0 0 0 / 8%);
flex: var(–tds-flex-nm);
}
.tds-card {
padding: var(–tds-size–2x);
border-radius: var(–tds-card–border-radius);
}
<div _ngcontent-ylf-c110=”” class=”tds-flex tds-flex-gutters” style=”margin-top: 15px;”>
<div _ngcontent-ylf-c110=”” class=”tds-card tds-card–dense my-card ng-star-inserted” style=”height: fit-content;”>
<span _ngcontent-ylf-c110=”” class=”my-card-label”>
News & Announcements
</span>
<div _ngcontent-ylf-c110=”” class=”tds-card-body my-card-content-small” style=”margin: 15px;”>
<ul _ngcontent-ylf-c110=”” class=”tds-list”>
<li _ngcontent-ylf-c110=””>
<h6 _ngcontent-ylf-c110=”” style=”padding-top: 0px;”>
NEWS_TITLE
</h6>
NEWS_BODY
</li>
</ul>
</div>
</div>
<div _ngcontent-ylf-c110=”” class=”tds-card tds-card–dense my-card” style=”height: fit-content;”>
<span _ngcontent-ylf-c110=”” class=”my-card-label”>
Changelog
</span>
<div _ngcontent-ylf-c110=”” class=”tds-card-body my-card-content-small” style=”margin: 15px;”>
<ul _ngcontent-ylf-c110=”” class=”tds-list”>
<li _ngcontent-ylf-c110=””>
<h6 _ngcontent-ylf-c110=”” style=”padding-top: 0px;”>
CHANGELOG_TITLE
</h6>
CHANGELOG_BODY
</li>
</ul>
</div>
</div>
</div>
أضف إجابة