Following to this answer, I am trying to create a perfect height for my content, But the content height is overflowing instead of getting a scroll over content.
I have created a fiddle for this scenario. Please help me fix my content height such a way that top content and always visible and scroll-able downward.
fiddle
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
}
.box .row.content {
display: flex;
flex-flow: column;
flex: 1 1 auto;
overflow-y: auto;
justify-content: center;
align-items: center;
}
.data {
width: 80%;
min-height: 400px;
}
.box .row.footer {
flex: 0 1 40px;
}
HTML.
<head>
<link href="./test.css" rel="stylesheet">
</head>
<body>
<div class="box">
<div class="row header">
<p>
<b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<div class="data">
invisible box1
</div>
<div class="data">
visible box2
</div>
<div class="data">
visible box3
</div>
<p>
<b>Bottom Box is visible with scroll.</b> (fills remaining space)
</p>
</div>
<div class="row footer">
<p>
<b>footer</b> (fixed height)</p>
</div>
</div>
</body>
</html>
The issue you encounter is caused by justify-content: center in the .box .row.content rule.
Remove it and your text will overflow properly.
.box .row.content {
display: flex;
flex-flow: column;
flex: 1 1 auto;
overflow-y: auto;
/*justify-content: center; removed */
align-items: center;
}
Updated fiddle
This is the default behavior for justify-content: center, where, on a flex column container, when the content overflow, it will overflow both at its top and bottom.
Read more here, where you find resources and a workaround:
How to use safe center with flexbox?
I think overflow: scroll; will fix your problem.
Related
I'm just trying the FlexLayout for different screen sizes.
The 3 boxes/divs below should be side to side on a large display, if it shrinks they should be above each other. But my top div is outside of my window and I don't want that.. How can I fix that?
<div class="container" fxLayout="row" fxLayout.lt-md="column" fxLayoutAlign="space-around center">
<div class="asd" [style.background-color]="'black'"></div>
<div class="asd" [style.background-color]="'green'"></div>
<div class="asd" [style.background-color]="'blue'"></div>
</div>
.asd {
min-height: 500px;
min-width: 400px;
}
.container {
height: 100%;
}
Flex elements won't stack unless you use flex-wrap: wrap along with a min-width or flex-basis declaration.
Basically, if the number of flex elements in the row would need to be smaller than their min-width they'll wrap to the next line.
.flexContainer {
display:flex;
max-width: 80%;
margin: 20px;
justify-content: space-between;
flex-wrap: wrap;
}
.flexItem {
background: #dddddd;
padding: 20px;
min-width: 200px;
margin: 0 10px 10px 0;
}
<div class="flexContainer">
<div class="flexItem">Flex</div>
<div class="flexItem">Flex</div>
<div class="flexItem">Flex</div>
<div class="flexItem">Flex</div>
</div>
Scenario :
I'm creating a pricing comparison table and am having difficulties aligning the last div, card-vat-fee, to the bottom of the container.
I need to do this because the tiers have longer running lists than
one another, causing the last div isn't aligned with the bottom of
the container.
How can I get the last div to align to the bottom of the flexbox?
Tried Case :
Of course, if I set a min-height: 320px; on the card-vat-fee class it will align the div to the bottom, however this isn't a responsive solution and I feel like there is a better approach that uses flex properties. Moreover, setting the card-vat-fee div to flex-grow, flex: 1 1 auto, produces an unideal solution.
Code :
<div class='pricing__tier'>
<div class='uni-card-header'>
</div>
<div class='uni-card-body'>
<div class='uni-row-on'>
</div>
<div class='uni-row-off'>
</div>
<div class='uni-row-on card-vat-fee'>
<div class='vat-fee-text'>
Credit card fees and VAT apply. See below for details.
</div>
</div>
</div>
</div>
<style>
.pricing__tier {
padding: 0;
text-align: center;
display: flex;
flex-direction: column;
width: 0%;
flex: 1;
}
.uni-card-body {
display: flex;
flex-direction: column;
}
</style>
Pricing Tier
Please Suggest.
Thanks in advance
Use margin-top:auto on the last div.
.pricing__tier {
padding: 0;
text-align: center;
display: flex;
flex-direction: column;
width: 25%;
flex: 1;
height: 200px; /* for demo purposes */
border: 1px solid grey;
}
.uni-card-body {
display: flex;
flex-direction: column;
flex: 1;
}
.card-vat-fee {
margin-top: auto; /* push to bottom */
background: green;
}
<div class='pricing__tier'>
<div class='uni-card-header'>
</div>
<div class='uni-card-body'>
<div class='uni-row-on'>
</div>
<div class='uni-row-off'>
</div>
<div class='uni-row-on card-vat-fee'>
<div class='vat-fee-text'>
Credit card fees and VAT apply. See below for details.
</div>
</div>
</div>
</div>
plaesa try this one :
.uni-card-body {
display: flex;
flex-direction: column;
width: 'for example' 700px;
}
.uni-row-on.card-vat-fee{
align-self: flex-end;
}
Ihope this will help you!
.uni-card-body {
display: flex;
flex-flow: row wrap;
justify-content: center;
background: yellow;
height: 90vh;
}
.uni-row-on.card-vat-fee {
align-self: flex-end;
background: green;
}
<div class='pricing__tier'>
<div class='uni-card-header'>
</div>
<div class='uni-card-body'>
<div class='uni-row-on'>
</div>
<div class='uni-row-off'>
</div>
<div class='uni-row-on card-vat-fee'>
<div class='vat-fee-text'>
Credit card fees and VAT apply. See below for details.
</div>
</div>
</div>
</div>
I've illustrated the thing in the snippet, it'll help.
Note: Content justification, background and height are for demonstration and not necessary.
1- set the parent div relative position without top & left & right &
bottom property
2- set the last div position absolute with bottom:0;right:0;left:0;height:36px;
<style>
.pricing__tier {
position:relative;
padding: 0;
text-align: center;
display: flex;
flex-direction: column;
width: 0%;
flex: 1;
}
.pricing__tier>.vat-fee-text {
position:absolute;
bottom:0;
right:0;
left:0;
height:36px;
}
</style>
I notice a difference between Chrome and Edge concerning overflow behavior.
As you can see running the following code, in Chrome this shows only the vertical scrollbar (rightly, in my opinion), while in Edge there are both scrollbars.
Is there a reason for this? How can I make Edge behave in the same way as Chrome does?
Thanks!
.container1 {
display: flex;
flex-flow: column;
align-items: flex-start;
}
.container2 {
display: flex;
flex-flow: column;
align-items: flex-start;
}
.container3 {
max-height: 150px;
overflow: auto;
}
.content {
width: 500px;
height: 200px;
background-color: blue;
}
<div class="container1">
<div class="container2">
<div class="container3">
<div class="content"></div>
</div>
</div>
</div>
Here's what I think is happening:
When the overflow is triggered (because height: 200px on the .content element is taller than the max-height: 150px on the parent), a vertical scrollbar is generated.
This scrollbar actually takes up width. The .content element is set to width: 500px. But once the scrollbar is generated, the width increases to 517px in Chrome. Note that scrollbar width varies among browsers.
Chrome appears to factor in or just ignore the vertical scrollbar width. It refrains from launching a horizontal scrollbar. Edge seems to consider the vertical scrollbar width as an overflow, and therefore launches the horizontal scrollbar.
There could be any number of reasons for this difference in behavior, including a different order of rendering elements and objects.
One thing is clear, if you move the width: 500px from the .content to the parent, the horizontal scroll problem is solved.
.container1 {
display: flex;
flex-flow: column;
align-items: flex-start;
}
.container2 {
display: flex;
flex-flow: column;
align-items: flex-start;
}
.container3 {
max-height: 150px;
overflow: auto;
width: 500px; /* new */
}
.content {
/* width: 500px; */
height: 200px;
background-color: blue;
}
<div class="container1">
<div class="container2">
<div class="container3">
<div class="content"></div>
</div>
</div>
</div>
jsFiddle demo
Try this : overflow-y: auto;
Link : https://www.w3schools.com/cssref/css3_pr_overflow-y.asp
After many attempts I have found a workaround by removing align-items: flex-start and replacing display: flex with display: inline-flex. Here's the new code:
.container1 {
display: inline-flex;
flex-flow: column;
}
.container2 {
display: inline-flex;
flex-flow: column;
}
.container3 {
max-height: 150px;
overflow: auto;
}
.content {
width: 500px;
height: 200px;
background-color: blue;
}
<div class="container1">
<div class="container2">
<div class="container3">
<div class="content"></div>
</div>
</div>
</div>
Hope it will help someone.
I'm currently developing my first website. I've come to a point where I have two divs placed next to each other inside of a flexbox. Both divs have a width and height size in percentages. When I shrink the website, however, the right div overlaps the left div. If they're going to overlap I want them to be placed underneath each other. (It's about the right-side-content div overlapping the left-side-content div)
I've included my HTML and CSS code.
HTML:
<div class="content">
<div class="left-side-content">
<div class="intro">
<div class="brands">
<img src="images/logo%20ster.png" id="logo-ster"/>
</div>
<p class="top-title">Banner and endcard</p>
<h1>STER</h1>
<p class="intro-text">"STER" is a beauty, make-up and lifestyle channel on YouTube hosted by the 16 y/o Aster Marcus.</p>
<button class="view-project-button">View Project</button>
</div>
</div>
<div class="right-side-content">
<img src="images/sponsorloop-collage.png"/>
</div>
</div>
CSS:
.content {
display: flex;
align-items: center;
height: 80%;
width: 90%;
margin-left: auto;
margin-right: auto;
}
.content .left-side-content {
width: 30%;
height: 100%;
display: flex;
align-items: center;
}
.content .right-side-content {
width: 70%;
display: flex;
align-items: center;
justify-content: flex-end;
}
Add the flex-wrap property to .content.
Also, instead of using width for left and right content, use flex-basis instead, or incorporate it into the shorthand flex, as in the snippet below...
.content {
display: flex;
align-items: center;
height: 80%;
width: 90%;
margin-left: auto;
margin-right: auto;
flex-wrap: wrap;
}
.content .left-side-content {
flex: 1 0 30%;
height: 100%;
display: flex;
align-items: center;
}
.content .right-side-content {
flex: 1 0 70%;
display: flex;
align-items: center;
justify-content: flex-end;
}
<div class="content">
<div class="left-side-content">
<div class="intro">
<div class="brands">
<img src="images/logo%20ster.png" id="logo-ster" />
</div>
<p class="top-title">Banner and endcard</p>
<h1>STER</h1>
<p class="intro-text">"STER" is a beauty, make-up and lifestyle channel on YouTube hosted by the 16 y/o Aster Marcus.</p>
<button class="view-project-button">View Project</button>
</div>
</div>
<div class="right-side-content">
<img src="https://placehold.it/300x300" />
</div>
</div>
.force-to-bottom {
background: grey;
align-self: flex-end;
width: 100%;
margin: 0;
text-align: center;
height:200px;
}
#story {
text-align: center;
display: flex;
flex-direction: column;
padding:0;
justify-content: space-between;
}
.row {
display: flex;
}
html, body, .row, .container {
height: 100%;
}
.container {
background: pink;
}
<div class="container fill-height">
<div class="row">
<div id="story" class="col-lg-12">
<h1 style="text-align:center;">Demo</h1>
<div class="row force-to-bottom text-center">
<p>It's supposed to stay at the bottom of this section n goes across the whole screen</p>
</div>
</div>
</div>
</div>
I have a single page with multiple containers. I'm trying to create a section like a footer at the bottom of one of those containers. That footer should stay at the bottom of that section, but not at the bottom of the entire page. I've tried to add a force-to-bottom div but that did not work. How should I achieve this? Many thanks!
<div id="containerOne" class="container fill-height">
<div class="row force-to-bottom text-center">
<p>this is the footer of that one div</p>
</div>
</div>
<div id="containerTwo" class="container fill-height">
</div>
You can use flexbox to achieve this easily.
Make the #story flex by giving it display: flex property along with flex-direction: column to align its children below each other vertically.
Next to the .force-to-bottom children simply give the property align-self: flex-end to float to the bottom of its respective containers.
html, body, .row, #story, .container {
height: 100%;
}
.row {
display: flex;
}
.container {
background: pink;
}
.force-to-bottom {
background: grey;
align-self: flex-end;
width: 100%;
height: 50px;
margin: 0;
justify-content: center;
align-items: center;
}
#story {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0;
}
<div id="payContainer" class="container fill-height">
<div class="row">
<div id="story" class="col-lg-12">
<h1 style="text-align:center;">Demo</h1>
<div class="row force-to-bottom text-center">
<p>It's supposed to stay at the bottom of this section n goes across the whole screen</p>
</div>
</div>
</div>
</div>
Update after OP updated code:
Like I mentioned, for the above updated HTML structure you have. You need to apply display: flex to the #story div instead(not the .container). Also add another property flex-direction: column to make its children elements align below each other. .force-to-bottom styles remain the same.