I have the following html and css:
HTML:
<body style="height:100%;">
<div class="fb-container">
<div class"somedatadiv">
Some data
</div>
<div class="anotherdiv">
data
</div>
</div>
</body>
CSS:
.fb-container {
display: flex;
flex-wrap: no-wrap;
align-items: stretch;
// min-height: 100%;
}
.somedatadiv {
width: 75%;
max-width: 345px;
backround: grey;
padding: 30px;
}
for some reason the flex container div is not stretching 100% of the body height.
(the browser I am using is chrome for this "demo/application/site")
You need to add display:flex to the parent tag for and then flex:1 to the child to enable the child to expand to 100% of parent.
.fb-container {
background-color:green;
flex: 1;
}
.somedatadiv {
width: 75%;
max-width: 345px;
background-color: grey;
padding: 30px;
}
<body style="height:100vh;display:flex;">
<div class="fb-container">
<div class="somedatadiv">
Some data
</div>
<div class="anotherdiv">
data
</div>
</div>
</body>
add this and it should work. Demo: https://jsfiddle.net/jacobgoh101/svtewj9j/
html,
body {
height: 100%;
}
body {
display: flex;
}
update: if you want the fb-container to stay full width
add flex: 1 1 100%; to it
.fb-container {
flex: 1 1 100%;
}
update: complete solution https://jsfiddle.net/jacobgoh101/svtewj9j/2/
html,
body {
height: 100%;
}
body {
display: flex;
}
.fb-container {
display: flex;
flex-wrap: no-wrap;
align-items: stretch;
flex: 1 1 100%;
}
.somedatadiv {
flex: 1 1 75%;
max-width: 345px;
backround: grey;
padding: 30px;
box-sizing: border-box;
}
There was some code missplaced in the MCV template.
that was messing up the style/layout.
this post is not relevant for other users so it will be removed/deleted
update: Can not delete this post:
Related
I have a layout that is mainly divided into 3 parts and the middle one should take a full height. And it does.
However, I need an additional div which will play a role of the backdrop and here the problem comes. The child doesn't want to take 100% height.
Here .body is a div that is being stretched when there is not enough content and .bg-gray is the one I want to take its parent full height.
Is there a way achieve this without using relative + absolute positioning?
Also, I'm looking for the answer to my question: why is this happening that way.
html, body {
padding: 0;
margin: 0;
}
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: stretch;
}
.header {
height: 50px;
background-color: #e6e6e6;
}
.footer {
height: 50px;
background-color: #aaa444;
}
.body {
flex: 1;
}
.bg-gray {
background-color: #eee;
min-height: 100%;
flex: 1;
}
<div class="container">
<div class="header">
</div>
<div class="body">
<div class="bg-gray">
<div>
asdasd
</div>
</div>
</div>
<div class="footer">
</div>
</div>
Apply flexbox to the .body div.
.body {
flex: 1;
display: flex;
flex-direction: column;
}
html,
body {
padding: 0;
margin: 0;
}
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: stretch;
}
.header {
height: 50px;
background-color: #e6e6e6;
}
.footer {
height: 50px;
background-color: #aaa444;
}
.body {
flex: 1;
display: flex;
flex-direction: column;
}
.bg-gray {
background-color: darkgrey;
min-height: 100%;
flex: 1;
}
.bg-gray div {
background: lightblue;
}
<div class="container">
<div class="header">
</div>
<div class="body">
<div class="bg-gray">
<div>
asdasd
</div>
</div>
</div>
<div class="footer">
</div>
</div>
How do I stretch the divs with a yellow background to full height? It should cover up the green but it is not working. I tried adding height: 100% on it but then it adds up the height from the search bar?
https://jsfiddle.net/nuy20j1h/
.block {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.sidebar {
height: 600px;
width: 25%;
background: red;
}
.home {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
width: 75%;
background: green;
}
.search-bar {
width: 100%;
padding: 25px;
background: blue;
}
.content-wrap {
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: flex-stretch;
}
.content,
.single {
width: 50%;
background: yellow;
}
<div class="block">
<div class="sidebar">sidebar</div>
<div class="home">
<div class="search-bar">search bar</div>
<div class="content-wrap">
<div class="content">lorem ipsum</div>
<div class="single">test</div>
</div>
</div>
</div>
First you should add a style reset, I'm using this now * {} as you can se below. The trick here is to run flex-direction: column; on .home and you can tell .content-wrap to take up the rest of that space after the search with flex-grow: 1;
box-sizing: border-box; is, if you add let's say width: 200px; to a element, and add padding: 20px;, the element will stay 200px with the padding included. If you don't have that, it will take up 200px + 40px.
if you want the fiddle, here it is
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.block {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.sidebar {
height: 600px;
width: 25%;
background: red;
}
.home {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
width: 75%;
background: green;
}
.search-bar {
width: 100%;
padding: 25px;
background: blue;
}
.content-wrap {
display: flex;
flex-grow: 1;
flex-wrap: wrap;
width: 100%;
align-items: flex-stretch;
}
.content,
.single {
width: 50%;
background: yellow;
}
<div class="block">
<div class="sidebar">sidebar</div>
<div class="home">
<div class="search-bar">search bar</div>
<div class="content-wrap">
<div class="content">lorem ipsum</div>
<div class="single">test</div>
</div>
</div>
</div>
As mentioned in other answers, there is one main issue here:
flex-direction: column;, which I added to home, to enable the usage of flex properties instead of height, to make the .content-wrap fill the available space left in home
That will make the .search-bar and .content-wrap stack vertical, and enable the use of flex: 1 on .content-wrap, which will make it fill the remaining space/height.
So even if you got answers already, and since there are some properties with wrong value, or not needed, I decided to post an answer to clarify the changes made.
See my notes made in the CSS for further clarifications and what I changed.
Stack snippet
.block {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.sidebar {
height: 600px;
width: 25%;
background: red;
}
.home {
display: flex;
flex-direction: column; /* added */
/*flex-wrap: wrap; removed, not needed */
/*align-items: flex-start; removed, items should fill parent's,
in this changed case, width */
width: 75%;
background: green;
}
.search-bar {
/*width: 100%; not needed, default for column
item is to fill parent width as
its "align-items" is "stretch" */
padding: 25px;
background: blue;
}
.content-wrap {
flex: 1; /* added, take the remaining space left
left of its parent (height in this case) */
display: flex;
flex-wrap: wrap;
/*width: 100%; not needed, default for column
item is to fill parent width as
its "align-items" is "stretch" */
/*align-items: flex-stretch; wrong value, should be "stretch",
though since that is the default,
it is not needed */
}
.content,
.single {
width: 50%;
background: yellow;
}
<div class="block">
<div class="sidebar">sidebar</div>
<div class="home">
<div class="search-bar">search bar</div>
<div class="content-wrap">
<div class="content">lorem ipsum</div>
<div class="single">test</div>
</div>
</div>
</div>
flex-direction: column; is your friend. Here is a reworked fiddle of your code: https://jsfiddle.net/vsjktmms/1/
Using the same HTML structure you provided:
.block {
display: flex;
width: 80%;
margin: 0 auto;
background-color: gray;
align-items: stretch;
}
.sidebar {
width: 25%;
height: 600px;
background-color: red;
}
.home {
display: flex;
flex-direction: column;
align-items: stretch;
width: 75%;
background-color: green;
}
.search-bar {
padding: 25px;
background-color: blue;
}
.content-wrap {
flex: 1 1 auto;
display: flex;
flex-wrap: wrap;
width: 100%;
background-color: pink;
}
.content,
.single {
width: 50%;
background: yellow;
}
I have trouble getting text-overflow: ellipsis and overflow: hidden working the way I need it.
Basically, I need to get the left div with class item1 and text "Please truncate me" to shrink as the width of the container decreases so that both item1 and item2 are on the same row.
No matter what I try I end up with the row overflowing and it never shrinks.
Tried various solutions from here but didn't manage to get any working the way I need.
.mainwrapper {
display: flex;
justify-content: center;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.content {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
margin-bottom: 20px;
max-width: 800px;
width: 100%;
height: 400px;
background-color: red;
}
.top-container {
display: flex;
flex-wrap: wrap;
width: 80%;
height: 80%;
background-color: cyan;
}
.title {
background-color: white;
}
.table-container {
display: table;
}
.skills-container {
width: 100%;
display: block;
background-color: green;
}
.skill-row {
width: 100%;
display: flex;
justify-content: start;
background-color: blue;
}
.item1 {
display: flex;
flex-wrap: nowrap;
}
.item2 {
flex-shrink: 0;
display: flex;
flex-wrap: nowrap;
}
.item-content {
display: flex;
}
.item-details {
display: flex;
}
.text1 {
display: inline-block;
white-space: nowrap;
background-color: yellow;
}
.small-button {
display: flex;
height: 50px;
width: 50px;
background-color: green;
}
.overflow-toverflow {
overflow: hidden;
text-overflow: ellipsis;
}
.flex-w {
flex-wrap: wrap;
}
.flex-nw {
flex-wrap: nowrap;
}
.flex-min {
flex: 1 1 auto;
min-width: 0;
}
.flex-sh-0 {
flex-shrink: 0;
}
.min0 {
min-width: 0;
}
<div class="mainwrapper">
<div class="content flex-min">
<div class="top-container flex-min">
<div class="title">Your skills</div>
<div class="table-container">
<div class="skills-container">
<div class="skill-row flex-nw flex-min">
<div class="item1 flex-min">
<div class="item-content">
<div class="small-button"></div>
<div class="text1 overflow-toverflow">Please truncate me! Please truncate me!Please truncate me!Please truncate me!Please truncate me!Please truncate me</div>
</div>
</div>
<div class="item2 flex-sh-0">
<div class="small-button"></div>
<div class="text1">Relevance: None Whatsoever None</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
codepen:
https://codepen.io/Tiartyos/pen/Ljxyqr
An initial setting on flex items is min-width: auto. This means that, by default, an item cannot shrink below the size of its content. This prevents the ellipsis from rendering since the item simply expands to accommodate all content.
Most of your flex items have the necessary min-width: 0 override applied. But not all of them.
Also, flex and table properties don't play well together. Mixing them can break a flex layout, which appears to be happening in your case.
With the following adjustments, your layout seems to work.
.table-container {
/* display: table; */
min-width: 0; /* NEW */
}
.item-content {
display: flex;
min-width: 0; /* NEW */
}
revised codepen
More information:
Why doesn't flex item shrink past content size?
(This post would be a duplicate of this link, if it weren't for the display: table matter.)
I used this guide to make my footer stick to the bottom : http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
This guide use flex box to do the job. It worked perfectly on Chrome and Firefox and even on Edge. But on IE11, all the elements collapse on each other like in this image :
Code demo :
body {
min-height: 100%;
position: relative;
}
.container {
display: flex;
min-height: 100vh;
height: 100%;
flex-direction: column;
}
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
background-color: green;
}
.Site-content {
flex: 1;
background-color: red;
}
footer {
background-color: blue;
height: 50px;
}
<body class="Site">
<div id="react-root">
<div class="container">
<main class="Site-content">Site</main>
<footer>Footer</footer>
</div>
</div>
</body>
Any idea how to fix this? Thanks in advance :-)
Just use following to make it working for IE11:
html, body{
height:100%;
}
Full Code:
html, body{
height:100%;
}
.Site {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: green;
}
.Site-content {
flex: 1;
background-color: red;
}
footer {
background-color: blue;
height: 50px;
}
<body class="Site">
<main class="Site-content">Site</main>
<footer>Footer</footer>
</body>
Working Fiddle link
<style>
.Site {
height: 100vh;
background-color: green;
}
main {
height: calc(100% - 50px);
background-color: red;
}
footer {
background-color: blue;
height: 50px;
}
</style>
This is because of the IE known bug. You can not use min-height and flexbox at the same time. Please refer https://connect.microsoft.com/IE/feedback/details/802625/min-height-and-flexbox-flex-direction-column-dont-work-together-in-ie-10-11-preview
Try to update your IE or height instead of min-height, also try to avoid vh. I think that will work for you.
body {
min-height: 100%;
position: relative;
}
.container {
display: flex;
height: 100%;
flex-direction: column;
}
.Site {
display: flex;
height: 100%;
flex-direction: column;
background-color: green;
}
.Site-content {
flex: 1;
background-color: red;
}
footer {
background-color: blue;
height: 50px;
}
I have small problem with my code.
With small amount of text it looks like really good ( firefox / chromium - window maximized ):
CSS:
* { margin: 0; padding: 0; }
html, body { height: 100%; max-height: 100%; overflow: hidden; width: 100%; }
body > div:last-child > div { width: 100%; }
body{
display: flex;
flex-direction: column;
}
body > div:first-child{
display: flex;
flex-grow: 0;
height: auto;
}
body > div:first-child > div{flex-grow: 1;}
body > div:last-child{
align-items: center;
background-color: black;
color: white;
display: flex;
flex-grow: 1;
overflow: auto;
}
HTML:
<body>
<div>
<div style="background-color: red;">Left</div>
<div style="background-color: green; text-align: center;">Center</div>
<div style="background-color: blue; text-align: right;">Right</div>
</div>
<div>
<div style="text-align: center;">
Start<br>
Test<br>Test<br>Test<br>Test<br>Test<br>
Test<br>Test<br>Test<br>Test<br>Test<br>
Test<br>Test<br>Test<br>Test<br>Test<br>
Test<br>Test<br>Test<br>Test<br>Test<br>
Test<br>Test<br>Test<br>Test<br>Test<br>
End
</div>
</div>
</body>
But when I add: "Test(...)" x2 - I have a problem with height, which is by default set to auto.
Here's a JSFIDDLE.
Here's a JSFIDDLE with x2 text - this is my issue.
Thanks for any help.
I don't know why adding a flex-basis value works, fixes the problem, but it does:
http://jsfiddle.net/Sd8qm/5/
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
max-height: 100%;
overflow: hidden;
width: 100%;
}
body > div:last-child > div {
width: 100%;
}
body {
display: flex;
flex-direction: column;
}
body > div:first-child {
display: flex;
flex: 0 auto;
height: auto;
}
body > div:first-child > div {
flex-grow: 1;
}
body > div:last-child {
align-items: center;
background-color: black;
color: white;
flex: 1 0 0; /* here */
overflow: auto;
}
Also, don't set elements to display: flex unless you actually need them to be flex containers.
You used a lot of unnecessary CSS code.
See this example.
I'm using this CSS to align the menu divs:
float: left;
width: 33%;
or you can try adding z-index: 3; to body > div:first-child > div
and also add height: 20px; to your menu.
Example 2
Update
You may want to try this method: Example 3
the top line gets shrinked because even you didn't specify it, the body > div:first-child is shrinkable because the default value of flex-shrink is 1
add flex-shrink:0 and you will resolve the problem
demo http://jsfiddle.net/kN2x4/13/