All but one of my web pages has minimal content and it isn’t enough to fill the screen as can be seen above. I have tried to solve the problem using flex-grow as follows:
Curiously, as a workaround, I added sufficient bottom padding to the blue background to more than fill the screen. A scroll bar appears then.
In that situation, when I apply the flex coding, the flex-shrink part works and the content shrinks to exactly fill the screen. Any suggestions. please.
[off-topic] @Engine44 when you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the code block.
UPDATE: In my original post I wrote: "Curiously, as a workaround, I added sufficient bottom padding to the blue background to more than fill the screen. A scroll bar appears then.
In that situation, when I apply the flex coding, the flex-shrink part works and the content shrinks to exactly fill the screen."
This is incorrect. The content does not shrink. The overflow is hidden. So neither flex-grow nor flex-shrink works as intended. It’s probably a syntax error on my part.
I’m away from a computer until tomorrow so can’t debug your code but it’s likely that your misuse of height:100% is to blame.
Percentage height (mostly) can only be based on an unbroken chain of parents that have a height defined other than auto or content height. This has to happen all the way back to the root element (html).
Otherwise the height is computed as auto.
Even if did work as you expect it would mean that your content would be trapped within that element and thus never expand. I.e. it would overflow.
You could try instead to use min-height:100vh. This will give you a full viewport height for that element. Be aware that you can’t start this element half way down a page and only expect it to go to the bottom so it would need to be the first element on the page on order for it to take the whole viewport only.
I will be back tomorrow to offer code if no one else jumps in today:)
You cannot base a percentage height on a parent with min-height. It has to be an unbroken chain of height:100% as I stated.
You can the use min-height:100% on the actual element (the last in that chain).
If you use height:100% on that final element then your content will spill out when the viewport height is reached. You never want to use a fixed height like that.
If you use the vh unit as I stated above you need no chain of parents with height defined.
“No that will fail because it limits the parent to only 100% which means content cannot expand the container further.”
A further thought on the above comment:
Right now, content is minimal and I’m more concerned about proper sizing of the background image, When content increases to the point where the container limits expansion, I could easily eliminate the “roadblock”.
Having said that, I would like to learn how to use the flex capabilities properly. So we’ll go back to your previous post. Thanks.
The problem is that you don’t know the height of the users screen or indeed if the browser is maximised or if this is a small device and your content has already overflowed!
You also don’t know what size text A user may have set as a default which indeed may already make your minimal content too tall for its container:)
In web design you must always code in a way that caters for these eventualities automatically. Anything else is considered bad practice as you simply don’t know what may be thrown at your design later on.
Always say to yourself “what if?”
What if my heading goes to 3 lines instead of one? What if the user had selected a large font size by default? What if there is not enough room for the content on a smaller screen or device?
Responsive design is all about making your design work no matter where it ends up. You have no control of the users device so you must plan for all eventualities as automatically as possible. This means using robust coding strategies from the start and not leaving things to chance.
Over the years I have seen hundreds of broken sites where the designer has catered mainly for their own screen size forgetting that their view is probably unique to them only.
Think beyond what you see and cater for what might happen if…?
In your page you don’t have the correct structure as shown by the demos we have been using so far.
You are adding the background image to an item that is not a flex-item but a child of a flex-item and therefore has no height apart from its own content. You also have many other flex items in that flex parent and they all take up their own space also.
In your current structure the easiest solution would be to apply the background image to a flex item such as #main and then make #main fill the available space.
I think you need to practice with flexbox a little more until you understand how it works. In short a container element is set to display:flex and that will automatically make its direct children (not grandchildren) become flex-items. You can’t apply styles to a grandchild and expect it to be a flex-item unless you have created nested flex boxes.
In reality you didn’t need the whole page to be a flexbox you just needed the header and the image to be the flex items.
Flexbox is great but it does take some time to understand how it all fits together.
