I have a problem in chrome which does not happen in Firefox.
<div class="container">
<div class="flex-1"></div>
<div class="flex-2">
<div class="flex-2-child"></div>
<div class="flex-3-child"></div>
</div>
</div>
.container {
height: 200px;
width: 500px;
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-flex;
display: flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
}
.flex-1 {
width: 100px;
background-color: blue;
}
.flex-2 {
position: relative;
-moz-box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
background-color: red;
}
.flex-2-child {
height: 100%;
width: 100%;
background-color: green;
}
.flex-3-child {
height: 100%;
width: 100%;
background-color: steelblue;
}
http://jsfiddle.net/michaelch/TfB9c/2/
If you check this fiddle in firefox and in chrome, you will see there is a big difference.
flex-2-child and flex-3-child have no height in chrome, but have the behavior which i think is right which both have a 100% height relative to their parent.
Do you know how to have the correct behavior in chrome?
Thanks in advance.
Michael
You will get the same result in Chrome as you do in Firefox if you add height: 100%; to your .flex-2 class.
.flex-2 {
position: relative;
-moz-box-flex: 1;
-webkit-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
background-color: red;
height: 100%; // Add this!
}
If a child's height is defined by a percentage of their parent's height, then the parent's height should be defined.
Related
#container {
display: flex;
flex-direction: column;
align-items: center;
height: 200px;
width: 100px;
background-color: red;
}
#stack{
display: flex;
flex-direction: column;
align-items: center;
max-height: 200px;
}
.item {
display: flex;
height: 30px;
width: 100px;
background-color: green;
flex-shrink: 0;
}
.spacer {
display: flex;
height: 200px;
flex-shrink: 1000;
}
<div id="container">
<div class="stack">
<div class="item">a</div>
<div class="spacer"></div>
<div class="item">b</div>
</div>
</div>
As the code shows above, parent had a max-height as the height of it is undefined.
I want the height of spacer was as large as possible. And what I expect is 160px in this situation.
I had tried flex-grow, but it doesn't work as the container has no height.
I had tried flex-shrink and a large height like the code in snippet either. But I found that sometime flex-shrink not work, or sometimes it looks scary with a very large height.
it does not work because you use a wrong selector for "stack" - it is a class, not id!
This should work: https://jsfiddle.net/bL5w81d4/1/
#container {
display: flex;
flex-direction: column;
align-items: center;
height: 200px;
width: 100px;
background-color: red;
}
.stack{
display: flex;
flex-direction: column;
align-items: center;
max-height: 200px;
}
.item {
display: flex;
height: 30px;
width: 100px;
background-color: green;
flex-shrink: 0;
}
.spacer {
display: flex;
height: 200px;
flex-shrink: 1000;
}
I have the following CSS and HTML as the minimal to reproduce the issue. On Chrome all good. IE11 not. Is there a way to fix the CSS and HTML so it works on both Chrome and IE11?
<html>
<style>
.max-box {
background-color: #00e;
width: 100px;
max-height: 80%;
padding: 5px;
display: flex;
flex: 1 1 auto;
}
.fixed-box {
background-color: #00e;
width: 100px;
height: 100px;
padding: 5px;
display: flex;
flex: 1 1 auto;
}
.wrapper {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.content {
background-color: #0e0;
display: flex;
flex: 1 1 auto;
flex-direction: column;
overflow: auto;
}
.footer {
background-color: #e00;
display: flex;
flex: 0 0 auto;
}
</style>
<body>
<div class="max-box" style="float: left">
<div class="wrapper">
<div class="content">
<span>a1</span><span>a2</span>
</div>
<div class="footer">
<span>b1</span><span>b2</span>
</div>
</div>
</div>
<div class="max-box" style="float: left">
<div class="wrapper">
<div class="content">
<span>a1</span><span>a2</span><span>a3</span><span>a4</span><span>a5</span><span>a6</span><span>a7</span><span>a8</span><span>a9</span>
</div>
<div class="footer">
<span>b1</span><span>b2</span>
</div>
</div>
</div>
<div class="fixed-box">
<div class="wrapper">
<div class="content">
<span>a1</span><span>a2</span><span>a3</span><span>a4</span><span>a5</span><span>a6</span><span>a7</span><span>a8</span><span>a9</span>
</div>
<div class="footer">
<span>b1</span><span>b2</span>
</div>
</div>
</div>
</body>
</html>
So the requirements are what Chrome is behaving:
Box 1 will not take up the space below if the content is little.
Box 2 will take up at most 80% height of the browser and the content is scrollable. Responsive if the browser height changes.
Box 3 is fixed height and the content is scrollable and spaced the same as box 2.
What IE11 failed are:
Box 1 and Box 2 does not make content scrollable when browser height changed to smaller than the content.
Box 3 content is scrollable but the values all cramped.
as this seems to be unanswered I will try to give you my two cents. IE and other browsers usually need autoprefixer for flexbox to work properly. Try the following, which is exactly your code run trough autoprefixer
.max-box {
background-color: #00e;
width: 100px;
max-height: 80%;
padding: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.fixed-box {
background-color: #00e;
width: 100px;
height: 100px;
padding: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.content {
background-color: #0e0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: auto;
}
.footer {
background-color: #e00;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
To be more specific, I have a flexbox:
.main{
display: flex;
display:-webkit-flex;
-webkit-align-items: stretch;
align-items: stretch;
-ms-flex: 3;
-webkit-box-flex: 3;
-moz-box-flex: 3;
-ms-box-flex: 3;
box-flex: 3;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
flex-direction: row;
border: 1px solid yellow;
height: 100%
position: absolute;
top: 0;
bottom: 0;
}
.landing-img{
border: 1px solid red;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
align-self: flex-end;
height: inherit;
}
img{
max-width: 80%;
}
<div class="main">
<div class="landing-img">
<img src="images/someimg.png" style="min-width:100%;"/>
</div>
</div>
in which the image extends out of its div element. I am trying to set the height of the image container to match height of its parent(main). I have tried to use the inherit, doesn't work. I tried height 100% doesn't work. webpage i am working on to get a visual reference
I try to make a grid of four boxes each 50% height and 50% width of the full screen size, like shown in this picture:
http://a.pomf.se/gqnzzs.jpg
My problem is that I can't get the 50% height to work. How can I set the height of 2 div above each other at each a height of 50% of the viewport size?
HTML:
<div class="wrapper">
<div class="row">
<div class="panel-1">... </div>
<div class="panel-2">...</div>
</div>
<div class="row">
<div class="panel-3">...</div>
<div class="panel-4">...</div>
</div>
</div>
CSS:
.wrapper{
width: 100%;
height: 100%;
display: inline-block;}
.panel-1{
width: 50%;
float: left;
height: 50%;}
.panel-2{
width: 50%;
float: left;
height: 50%;}
.panel-3{
width: 50%;
float: left;
height: 50%;}
.panel-4{
width: 50%;
float: left;
height: 50%;}
I greatly appreciate any help!
Greets
In supported browsers, you can use viewport-percentages units, vh, vw, vmin, vmax.
In this case, just use 50vh, where 1 unit equals 1% of the height of the initial containing block.
Example Here
.panel-1, .panel-2,
.panel-3, .panel-4 {
height: 50vh;
width: 50%;
float: left;
}
For what it's worth, if you want to still use percentage based units, you would need to define all the parent element's heights too:
Updated Example
html, body, .wrapper {
height: 100%;
}
.row {
height: 50%;
}
.panel-1, .panel-2,
.panel-3, .panel-4 {
height: 100%;
width: 50%;
float: left;
}
Solved by flexbox. Caniuse
No float, no clearfixes - simple and clear;
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
body {
background-color: #333;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-o-box-lines: multiple;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.flex__item {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
height: 50%;
background-color: #777;
border: 1px solid #000;
}
.flex__item:nth-child(1) {
background-color: #9aa0a8;
}
.flex__item:nth-child(2) {
background-color: #a7c4b5;
}
.flex__item:nth-child(3) {
background-color: #a9d8b8;
}
.flex__item:nth-child(4) {
background-color: #beffc7;
}
<div class="flex__item"></div>
<div class="flex__item"></div>
<div class="flex__item"></div>
<div class="flex__item"></div>
You need to set following:
html { height:100%; width:100%;}
body { width:100%;height:100%;}
Then "div" will work with "height:50%".
I would like to have a one-line "row" that contains 2 "columns". The first "column" should be fluid and cut off overflowing text.
The example below is perfectly working in webkit browsers (Chromium, Safari), but not in Firefox or Opera.
Does anyone know a solution that works in all browsers?
http://jsfiddle.net/fluidblue/YV3s9/
HTML:
<div class="header">
<div class="clickable">
<div class="description">
Some very very very very very very very very very very long description
</div>
</div>
<div class="buttons">
Link1
Link2
</div>
</div>
<div class="content">
Text below
</div>
CSS:
*
{
margin:0;
padding:0;
}
.header
{
background-color: gray;
display: table;
width: 100%;
}
.clickable
{
background-color: green;
display: table-cell;
width: 100%;
position: relative;
cursor: pointer;
}
.description
{
width: 100%;
position: absolute;
top:0;
left:0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.buttons
{
background-color: red;
display: table-cell;
white-space: nowrap;
}
Edit: Added top, left as suggested by web2008
Try removing position: absolute given for description or else if you wnat it then set the left and top values.
Tried another approach: flex-box. This is working in Firefox, Chromium, Safari, but not in Opera (overflow: hidden is ignored..)
http://jsfiddle.net/JH5fQ/
HTML:
<div class="flex-container flex-container-style">
<div class="flex-item">
Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>
<div class="flex-item">
Button Button
</div>
</div>
CSS:
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: start;
-moz-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.flex-item
{
white-space: nowrap;
}
.flex-item:nth-child(1)
{
overflow: hidden;
text-overflow: ellipsis;
background-color: red;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
.flex-item:nth-child(2)
{
background-color: green;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 0;
-moz-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
/* Legacy Firefox implementation treats all flex containers as inline-block elements. */
#-moz-document url-prefix()
{
.flex-container
{
width: 100%;
-moz-box-sizing: border-box;
}
}
Found a solution working in Firefox, Chromium, Safari and Opera (IE untested):
http://jsfiddle.net/zKtU3/
HTML:
<div class="header">
<div class="clickable">
<div class="posrel">
<div class="description">
Some very very very very very very very very very very long description
</div>
</div>
</div>
<div class="buttons">
<div>Button1</div><div>Button2</div>
</div>
</div>
<div>
Text below
</div>
CSS:
.header
{
display: table;
width: 100%;
height: 50px;
}
.clickable
{
display: table-cell;
width: 100%;
}
.posrel
{
position: relative;
/* Vertically centering the text */
line-height: 50px;
}
.description
{
width: 100%;
position: absolute;
top: 0;
left: 0;
/* Cut text */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.buttons
{
display: table-cell;
vertical-align: middle;
/* Prevent wrapping of multiple buttons */
white-space: nowrap;
}
.buttons div
{
display: inline-block;
}
The additional div with the class posrel is needed, because firefox has got a bug when setting position: relative on table-cells: Does Firefox support position: relative on table elements?