I have built a landing page with the below HTML.
I have also carefully constructed a bootply, showing exactly how the pink div expands too far, and does not cover the screen as intended.
https://www.bootply.com/bYlAS71OWw
I have a pink region that should resize to take up the available space filling the browser, but not creating a scrollbar.
It appears that the breadcrumb, and the heading are not being subtracted from the overall area used.
heading is in a col, and is flex,
.breadcrumb is flex.
The page creates scroller for the combined height of the the heading and breadcrumb.
<app-dashboard>
<div class="app-body">
<main class="main">
<ol class="breadcrumb">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item active">
<span tabindex="0">Property Locations</span>
</li>
</ol>
<div class="container-fluid d-flex h-100">
<router-outlet></router-outlet>
<ng-component class="d-flex flex-grow w-100">
<div class="row w-100">
<div class="col">
HEADING
</div>
<div class="d-flex flex-grow bg-pink-300 h-100 w-100">
THIS SHOULD GROW, BUT NOT CREATE A SCROLLBAR
</div>
</div>
</ng-component>
</div>
</main>
</div>
<footer class="app-footer">
<span>
Pander.</span>
<span>
<i class="fa fa-fw fa-code-fork"></i>
</span>
</footer>
</app-dashboard>
The CSS for flex-grow is:
.flex-grow {
flex: 1 0 auto;
}
Please simplify the example (remove custom tags for example). I get only roughly what you are trying to achieve, but a few things first:
What grows and shrinks is flex item, not flex container. And an element only becomes a flex item when its immediate parent is a flex container. Your div with bg-pink-300 is not a flex item because its immediate parent is just a row
It appears that you want to use flexbox to make your div automatically fill the available vertical space. But all your flex containers are horizontal containers, hence vertically you are really just relying on the percentage height.
Generally, your main container should be a vertical flexbox that defines the total vertical space which should not overflow. Your breadcrumb, header, and the pink div all go into this container as flex items. Breadcrumb and header do not need to grow or shrink, they should have flex: none. The pink div can be defined to have flex: 1 1 0 so that it grows and shrinks to obsorb whatever space within the main container after breadcrumb and header have taken their cut.
Related
This is the demo of my problem.
And this is the outline of my HTML:
<div class="container">
<div class="f1">
TITLE
</div>
<div class="f2">
<div class="f2-child">
<img/>
</div>
</div>
</div>
Basically it's a flex container which contains two flex items. The first flex item(f1) is the title, which takes up some fixed height. And the second flex item(f2) fill the rest of the height. So far so good.
And I put another flex container(f2-child) inside of f2, just to create some margin space. And I want an image to fit inside f2-child. The image should be as wide as f2-child, but its maximum height should be the same as f2-child.
It works fine when the viewport's width is low, but when the width gets higher, the image would overflow. I tried setting f2 and f2-child's max-height to 100%, but it does not work.
To solve the issue of the image overflowing, you can try setting the max-width property of the image to 100% and the width property to auto. This will ensure that the image's width is equal to the width of the parent container (f2-child) and its height is proportional to its width, preventing overflow.
You can also add overflow: hidden to the f2-child container to clip any content that exceeds its boundaries.
Here's the updated code:
<div class="container">
<div class="f1">
TITLE
</div>
<div class="f2">
<div class="f2-child" style="overflow: hidden;">
<img style="max-width: 100%; width: auto;" />
</div>
</div>
</div>
Add the two tailwind classes h-full object-cover to your image tag.
<img src="https://source.unsplash.com/04X1Yp9hNH8/1600x900" alt="img" class="w-full h-full object-cover"/>
I've figured out myself by learning more about how flexbox works.
This is my final outcome: codepen link. I use tailwind so you need to know a little bit about it.
Now my layout looks like this:
<div class="container">
<div class="f1">
TITLE
</div>
<div class="f2">
<img/>
</div>
</div>
I removed f2-child from the last version.
The flex direction of the container is column, so after determining the height of f1, f2 would stretch itself. f2 is also a flex container, but with row flex direction. The image is its flex item.
Notice how f2 has multiple tailwind classes. flex items-center justify-center make sure image is horizontally and vertically aligned in f2.
And f2's grow-0 shrink-1 basis-auto h-full min-h-0 plus img's max-h-full make sure that when the view port is wider, the content won't overflow.
For more details you could see this post: Prevent flex items from overflowing a container
I'm a bit new to using flexbox and I've ran into one problem I can't seem to fix.
What I want:
I want to have a container taking the available height, but whenever the content inside it takes up more space than the containers height, apply overflow:scroll
Context:
Ref image:
container image
As you see on the image, everything inside of the red brackets are covered inside of a div with flex-grow:1, I want this because the images might be different sizes so therefore I need the div to take the reamining space.
As for the white container, that is also using flex-grow:1 so that the button can be on the bottom of the div.
Now, what I would like is for the content inside of the blue brackets to be taking the available height, but if there is more content than the available height, then I want it to be scrollable.
The thing that happens now if I add a lot more content to the container inside of the blue brackets, it pushes everything below it further down, meaning the overflow isn't working.
E.g Like so
As you see in the image, everything is just pushed further down and the div is being stretched.
Here is the code I have so far:
<div class="flex flex-col grow overflow-y-auto w-3/4 my-2 mx-auto bg-white max-h-full">
<!-- img -->
<div>
<img [src]="currentUser.photoURL" class="w-full mx-auto">
</div>
<!-- information -->
<div class="flex flex-col text-black grow">
<!-- Info -->
<div class="flex flex-col p-2 divide-y grow overflow-y-auto">
<div class="flex flex-col">
<p class="font-bold">{{currentUser.displayName}}</p>
<p class="font-thin">{{currentUser.email}}</p>
</div>
<div class="p-2 overflow-y-auto max-h-[90%]">
<div class="h-full grow-0 overflow-y-auto">
<p>
some information about {{currentUser.displayName}}
</p>
<ul>
<li>
Some values are
</li>
<li>
Some experience are...
</li>
<li>
Why im helping people...
</li>
</ul>
</div>
</div>
</div>
<!-- Message -->
<div class="shrink-0 p-2 text-center w-full bg-blue-500">
<button>Send melding</button>
</div>
</div>
</div>
I'm using tailwindCSS for this project, but will happily take suggestions in normal css as well.
I think the simplest solution for this would be to set the div you want to be a scrollable as "display: block" (or at least some version of block) with a fixed height. Once you apply that fixed height, your overflow content ought to be scrollable.
I am trying to create a page that doesn't scroll. Certain child elements on the page can scroll, but I'm trying to prevent the page as a whole from scrolling. I have a very nested child element that, when overflowed, receives a scroll bar, but also causes the main document to grow and receive a scroll bar as well.
This is the heart of the issue, but there are a few more nested levels that may be a factor.
<div class="h-100 d-flex flex-column">
<div class="d-flex align-items-center justify-content-center bg-red" style="height: 7%">
</div>
<div class="d-flex align-items-center justify-content-center bg-red" style="height: 3%">
</div>
<div class="bg-green" style="max-height: 75%; height: 75%; overflow-y: auto;">
<div class="bg-gray m-4" style="height: 2000px;">
The height of this content causes BOTH scroll bars to appear. I only want a bar on the
'green section'
</div>
</div>
<div class="bg-red flex-grow-1">
</div>
</div>
This code pen demonstrates how my app is set up. The overflowing element is nested deep within many flex displays (coming from bootstrap 4 utility classes).
https://codepen.io/averyferrante/pen/YMdNpO
I want only the green section from the code pen to scroll, not the entire document to grow/scroll as well.
The problem is that a couple of your containers are missing height definitions. As a result, the children of those containers ignore the percentage heights applied to them.
Add this to your code:
<div class="flex-grow-1" style="height: calc(100% - 48px);">
This height rule gives the container a defined height while compensating for the height of its sibling.
Another height rule was missing three levels down:
<div class="d-flex flex-column w-100" style="height: 100%;">
revised codepen
More detailed explanations:
Working with the CSS height property and percentage values
Chrome / Safari not filling 100% height of flex parent
Did you try playing with position: absolute? You can then set width and height as needed and the red box will see its scrollbar disappear!
I have a flexbox parent container whose flex-grow gives my containing div element as much height as is available. The children of this div element of course have height:100%. This works fine.
<div style="display:flex; flex-direction:column;">
<div style="flex-grow:1;background:green;" id="parentContainer">
<div style="height:100%;overflow:auto;background:red;" id="contentContainer">
<!-- content of whatever size confined to space allocated -->
</div>
</div>
</div>
But when I have an angular component in-between the parentContainer and contentContainer like so:
<div style="display:flex; flex-direction:column;">
<div style="flex-grow:1;background:green;" id="parentContainer">
<my-ng-component style="height:100%; display:block; background:blue;">
<div style="height:100%;overflow:auto;background:red;" id="contentContainer">
<!-- content of whatever size confined to space allocated -->
</div>
</my-ng-component>
</div>
</div>
The angular component resets the height to 0px, so the contentContainer ends up with 0px height as well.
How do I fix the angular component to not destroy the height information?
Plunk: http://plnkr.co/edit/0eai5HFZh7o2Vguzd5j6?p=preview
Generally, height: 100% doesn't work properly on child of a flex child, and the main reason is that Flexbox stretch to fit its flex parent but still resolve its height to auto, as shown here in this answer:
Why height=100% doesn't work?
In your case though, when using flex column direction, it is possible.
The now used flex-grow: 1 will leave the flex-shrink and flex-basis to their default, 1 and auto, and here it is the auto that cause the issue.
By changing it to, and here using the recommended shorthand flex, flex: 1 100% the child and its descendants will have a height to pick up their 100% from.
Note 1, simply using flex: 1 (same as flex: 1 1 0) works too on Chrome/FF/Edge/IE11, but if I'm not wrong, Safari 10 had some issues when flex-basis becomes 0.
Updated plnkr
With the following updated code fragments
app.component.html
<div style="display:flex;flex-direction:column;height:324px;">
<div style="flex:1 100%; background:black; color: white;">
foo
<app-list style="height:100%;display:block; background:blue;"></app-list>
</div>
</div>
I'm having some difficulties with flexbox. As you can see, I have an aside element that holds an ordered list of social media icons. For some reason, I'm unable to make these icons stick to the BOTTOM on the containing div.
HTML CODE
<div class="outercontainer group">
<div class="dividing-row span_1_of_2 col">
<p> here is some text </p>
<aside>
<ol class="category-name">
<li><i class="fa fa-pinterest-p"></i></a></li>
<li><i class="fa fa-flickr"></i></a></li>
</ol>
</aside>
</div>
</div>
CSS CODE
.outercontainer // this keeps all containers the same height in fluid design
{
display: flex;
flex-wrap: wrap;
}
ol.category-name
{
display: inline-block;
color: #FFF;
align-self: flex-end!important; // this does not work
}
Can anyone help? am I missing the obvious?
Many thanks,
p
Here are a few things to consider:
When you create a flex container only the child elements become flex items. Any descendant elements beyond the children are not flex items and flex properties don't apply to them.
If you want to apply flex properties to the children of flex items, you need to make the flex item a flex container, as well. In other words, you need to create nested flex containers.
You haven't specified any heights for your containers. So the height of each container is based on the height of the content. If the content is a single row, you really don't have much height.
So in your HTML structure, the flex container is...
<div class="outercontainer group">
and the only flex item is...
<div class="dividing-row span_1_of_2 col">
The <p>, <aside>, <ol> and <li> are regular block elements. Flex properties don't apply.
If you want to use flex properties to align the social media icons at the bottom of the container, you need to make the parent a flex container and give it a height.
Here's a demo with more details: http://jsfiddle.net/f1qnjwd3/1/
Couple of more notes:
In your ordered list, you're missing an opening <a> tag.
In my demo, the heights are for demo purposes only. They may not align perfectly because I wasn't trying to create a perfect layout, just an illustration of how this answer works.