I have a html
<style>
.container {
display: flex;
flex-direction: column;
width: 400px;
height: 400px;
margin: 0 auto;
border: solid 1px black;
}
.sub-container {
display: flex;
flex-direction: column;
flex-grow: 1;
//height: 100%;
margin: 5px;
border: solid 1px yellow;
}
.red-block {
margin: 5px;
border: solid 1px red;
}
.green-block {
flex-grow: 1;
margin: 5px;
border: solid 1px green;
overflow-y: auto;
}
.blue-block {
margin: 5px;
border: solid 1px blue;
}
</style>
<div class="container">
<div class="red-block">HEADER</div>
<div class="sub-container" > <!-- Polymer module -->
<!-- shady dom -->
<div class="green-block">
<div style="height: 500px;">CENTER</div>
</div>
<div class="blue-block">FOOTER</div>
</div>
</div>
Example on Plunker
As you can see the content is outside of main block (black border).
If I remove (yellow border) then the result will be ok.
But I use Polymer.js and when I add my dom-module to the page I get excess div (sub-container) which breaks my layout.
How to make sub-container do not effect on layout?
use flex-basis: 0; for the div to force fit inside the container.
add flex-basis:0; to .green-block class to get the desired effect
http://plnkr.co/edit/Xj6fe8
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<style>
.container {
display: flex;
flex-direction: column;
width: 400px;
height: 400px;
margin: 0 auto;
border: solid 1px black;
}
.sub-container {
display: flex;
flex-direction: column;
flex-grow: 1;
//height: 100%;
margin: 5px;
border: solid 1px yellow;
}
.red-block {
margin: 5px;
border: solid 1px red;
}
.green-block {
flex-basis: 0;
flex-grow: 1;
margin: 5px;
border: solid 1px green;
overflow-y: auto;
}
.blue-block {
margin: 5px;
border: solid 1px blue;
}
.traitor {
height: 500px;
}
</style>
<div class="container">
<div class="red-block">HEADER</div>
<div class="sub-container">
<!-- Polymer module -->
<!-- shady dom -->
<div class="green-block">
<div class="traitor">CENTER</div>
</div>
<div class="blue-block">FOOTER</div>
</div>
</div>
</body>
</html>
Comment if this is not what you are asking about!
Now I get it work.
One needs to add to sub-container:
height: 0px;
flex-grow: 1;
Due to height: 0px; element will not depend on a big children elements.
http://plnkr.co/edit/bbqsTJiguBXFlzySpLRu?p=preview
Related
I've searched and tried a lot of solutions but none of them is working for my case.
I have this set up where neither body nor main should change. Inside them I can add as many divs as I want and change any style.
<div class="body">
<div class="main">
<div class="should-be-full-height">
Content
</div>
</div>
</div>
.body {
display: flex;
flex-direction: column;
min-height: 100vh;
height: auto;
width: 100%;
background-color: #CCC;
border: 1px solid black;
}
.main {
height: auto;
flex-grow: 1;
display: block;
background-color: red;
border: 1px solid white;
}
.should-be-full-height {
background-color: grey;
border: 1px solid black;
}
https://jsfiddle.net/eqwu3yfh/
I added background colors and borders just to see better what's going on.
I need the div with the .should-be-full-height class to use 100% of the height of its parent (.main). How can I achieve that?
Thanks. Sorry if this has been asked, I couldn't find an answer.
You either remove flex-direction: column from body and you can use height:100%
.body {
display: flex;
/* flex-direction: column;*/
min-height: 100vh;
height: auto;
width: 100%;
background-color: #CCC;
border: 1px solid black;
}
.main {
height: auto;
flex-grow: 1;
display: block;
background-color: red;
border: 1px solid white;
}
.should-be-full-height {
background-color: grey;
border: 1px solid black;
height: 100%;
}
<div class="body">
<div class="main">
<div class="should-be-full-height">
Hi
</div>
</div>
</div>
Or you change the display of main to be flex and use width: 100%
.body {
display: flex;
flex-direction: column;
min-height: 100vh;
height: auto;
width: 100%;
background-color: #CCC;
border: 1px solid black;
}
.main {
height: auto;
flex-grow: 1;
display: flex;
background-color: red;
border: 1px solid white;
}
.should-be-full-height {
background-color: grey;
border: 1px solid black;
width: 100%;
}
<div class="body">
<div class="main">
<div class="should-be-full-height">
Hi
</div>
</div>
</div>
I know you said you cannot change body and main but I don't see any other solution.
I have the following...
...and I want to stack the blue container (with box 10 and 20) when outer green container width falls below 500px, like this:
I'm using media screen to do this but the fiddle shows how the stacking doesn't work properly and enters the brown container. The stacking works fine when the blue container is allowed to locate at the top of the green container using a relative position, but it fails when I locate it at the bottom using absolute. Can anyone show me what I'm doing wrong?
#TOTALcontainer {
border: 1px solid green;
position: absolute;
margin: 5px;
}
#outerLHcontainer {
position: relative;
border: 1px solid brown;
margin: 5px;
}
#LHcontainer {
position: relative;
border: 1px solid red;
margin: 30px 0 30px 10px;
margin-right: 12vw;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
#div1,
#div2,
#div3 {
width: 250px;
height: 10px;
padding: 10px;
border: 1px solid #aaaaaa;
float: left;
clear: left;
margin: 10px;
}
#RHcontainer {
position: relative;
border: 1px solid blue;
margin: 5px;
display: flex;
bottom: 0;
right: 0;
float: right;
}
#div10,
#div20 {
width: 60px;
height: 10px;
margin-right: 30px;
padding: 10px;
border: 1px solid #aaaaaa;
}
#media screen and (min-width: 500px) {
#outerLHcontainer {
width: 50%;
float: left;
}
}
<div id="TOTALcontainer">
<div id="outerLHcontainer">
<div id="LHcontainer">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
</div>
</div>
<div id="RHcontainer">
<div id="div10">10</div>
<div id="div20">20</div>
</div>
</div>
http://jsfiddle.net/pb2gckL5/3/
You could go probaly another way to do it. Simply with flexbox:
<div class="container">
<div class="left">
the item of the left <br>left <br>left <br>left <br>left <br>left <br>left <br>left <br>
</div>
<div class="right">
<div class="right-block">
blue block
</div>
</div>
</div>
.container {
width: 100%;
border: 1px solid red;
display: flex;
align-items: flex-end;
}
.left, .right {
flex: 1 0 0;
margin: 5px;
}
.left {
border: 1px solid green;
}
.right {
border: 1px solid blue;
}
#media screen and (max-width: 499px) {
.container {
flex-direction: column;
}
.left, .right {
width: calc(100% - 10px);
}
}
https://codepen.io/priatelko/pen/oNYoKga
My goal is to let "header-title" and "content" control the "entity" div size - depending if title or content is horizontally larger, the entity fits width to the larger one, but also I would like to make "header-address" shrink to the visible horizontal area. If title and content is small I would like it to show only for example "0x5C9...", and also I want "header-right-side" to stay on the right side with static size. Can anyone help me to make the style working correctly?
.entity {
display: inline-block;
border: solid 1px blue;
}
.header {
width: 100%;
display: inline-block;
box-sizing: border-box;
border: solid 1px blue; display:flex; flex-direction:row;
}
.header-left-side {
display: inline-block;
flex-direction: column;
border: solid 1px red;
}
.header-right-side {
border: solid 1px red;
width: 120px;
}
.header-title {
border: solid 1px red;
}
.header-address {
border: solid 1px red;
text-overflow: ellipsis;
width: calc(100%);
/* Required for text-overflow to do anything */
white-space: nowrap;
overflow: hidden;
}
.content {
border: solid 3px green;
width: 500px;
}
<div class="entity">
<div class="header">
<div class="header-left-side">
<div class="header-title">
My contract title
</div>
<div class="header-address">
0x5C9cD4dDF6F1f4008C7Da7377451223F1503FAc6
</div>
<div class="header-address">
0x179397aabe842d4725bc8aa300772FB6D6969568
</div>
</div>
<div class="header-right-side">
<button>min</button><button>c</button><button>options</button>
</div>
</div>
<div class="content">
bbfffffffffbbfffffffffbbfffffffffbbfffffffffbbfffffffff
</div>
</div>
Remove 500px from width in .content, so it will not be fixed. Use flex-grow for the .header-left-side element.
Then, for the .header-address, you have to wrap its content in a <span>. Like this, you can use position relative and absolute, ellipsis and a max-width, so it will work as expected.
.entity {
display: inline-block;
border: solid 1px blue;
}
.header {
width: 100%;
box-sizing: border-box;
border: solid 1px blue;
display: flex;
flex-direction: row;
}
.header-left-side {
display: inline-block;
flex-direction: column;
border: solid 1px red;
flex-grow: 1;
}
.header-right-side {
border: solid 1px red;
width: 120px;
}
.header-title {
border: solid 1px red;
}
.header-address {
border: solid 1px red;
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;
overflow: hidden;
position: relative;
height: 18px; // required because of the absolute position of the span
}
.header-address span {
overflow: hidden;
position: absolute;
display: block;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
}
.content {
border: solid 3px green;
}
<div class="entity">
<div class="header">
<div class="header-left-side">
<div class="header-title">
My contract title
</div>
<div class="header-address">
<span>0x5C9cD4dDF6F1f4008C7Da7377451223F1503FAc6</span>
</div>
<div class="header-address">
<span>0x179397aabe842d4725bc8aa300772FB6D6969568</span>
</div>
</div>
<div class="header-right-side">
<button>min</button><button>c</button><button>options</button>
</div>
</div>
<div class="content"> bbfffffffffbbfffffffffbbfffffffffbbfffffffffbbfffffffff
</div>
</div>
This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 5 years ago.
What's the best way to shrink-wrap a div using flex-box?
In the snippet below, I have a wrapper (the green border) shrink-wrapping the content (red & blue boxes) on all sides but the bottom.
How can I get this accomplished?
Here's a plunker demo: https://plnkr.co/edit/u89JPIbZObTYIfRejlO1?p=preview
.red {
width: 100px;
height: 50px;
background-color: red;
}
.blue {
width: 100px;
height: 50px;
background-color: blue;
}
.container2 {
width: 400px;
height: 300px;
border: solid;
display: flex;
justify-content: center;
}
.wrapper2 {
border: solid green;
padding: 5px;
}
<div class="container2">
<div class="wrapper2">
<div class="red">x</div>
<div class="blue">x</div>
</div>
</div>
you can use :
align-items
.container2 {
width: 400px;
height: 300px;
border: solid;
display: flex;
justify-content: center;
align-items:flex-start;/* update here */
}
.red {
width: 100px;
height: 50px;
background-color: red;
}
.blue {
width: 100px;
height: 50px;
background-color: blue;
}
.container2 {
width: 400px;
height: 300px;
border: solid;
display: flex;
justify-content: center;
align-items:flex-start;
}
.wrapper2 {
border: solid green;
padding: 5px;
/*margin:0 auto auto*/
}
<div class="container2">
<div class="wrapper2">
<div class="red">x</div>
<div class="blue">x</div>
</div>
</div>
or margin
.wrapper2 {
border: solid green;
padding: 5px;
margin:0 auto auto/* update here */
}
.red {
width: 100px;
height: 50px;
background-color: red;
}
.blue {
width: 100px;
height: 50px;
background-color: blue;
}
.container2 {
width: 400px;
height: 300px;
border: solid;
display: flex;
justify-content: center;
/* align-items:flex-start;*/
}
.wrapper2 {
border: solid green;
padding: 5px;
margin:0 auto auto
}
<div class="container2">
<div class="wrapper2">
<div class="red">x</div>
<div class="blue">x</div>
</div>
</div>
a reminder/titorial: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Use the align-items: flex-start; property on .container2
.red {
width: 100px;
height: 50px;
background-color: red;
}
.blue {
width: 100px;
height: 50px;
background-color: blue;
}
.container2 {
width: 400px;
height: 300px;
border: solid;
display: flex;
justify-content: center;
align-items: flex-start;
}
.wrapper2 {
border: solid green;
padding: 5px;
}
<div class="container2">
<div class="wrapper2">
<div class="red">x</div>
<div class="blue">x</div>
</div>
</div>
What I want to do basically is have a header and a container always centered if they're small than the screen (body with 100% height). In case the content and header are bigger than the screen, then allow to scroll inside its container (notice that the header shouldn't be scrollable).
I managed to make it work in Chrome but not in IE10. This is the JSFiddle.
var p = $('p');
$('button').click(function(){
for(var i=0; i<30; i++){
$('.content').append(p.clone());
}
});
.screen{
border: 1px solid red;
padding: 3px;
height: 300px;
display: flex;
display: -ms-flexbox;
justify-content: center;
-ms-flex-pack: center;
flex-direction: column;
-ms-flex-direction: column;
}
.header{border: 1px solid blue; padding: 10px;}
.content{ border: 1px solid green; background: #aaa; overflow: auto;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add more content</button>
<div class="screen">
<div class="header">
Header
</div>
<div class="content">
<p>This is the content</p>
</div>
</div>
http://jsfiddle.net/w8zg8hr2/2/
You need to add flex: 0 1 auto; to the .content div and overflow: auto; to the .screen container. IE10 uses the 2012 syntax which defaults to flex: 0 0 auto instead of the modern value of flex: 0 1 auto;
var p = $('p');
$('button').click(function () {
for (var i = 0; i < 30; i++) {
$('.content').append(p.clone());
}
});
.screen {
border: 1px solid red;
padding: 3px;
height: 300px;
display: flex;
display: -ms-flexbox;
justify-content: center;
-ms-flex-pack: center;
flex-direction: column;
-ms-flex-direction: column;
overflow: auto;
}
.header {
border: 1px solid blue;
padding: 10px;
}
.content {
border: 1px solid green;
background: #aaa;
overflow: auto !important;
flex: 0 1 auto; /* Add this property value */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add more content</button>
<div class="screen">
<div class="header">Header</div>
<div class="content">
<p>This is the content</p>
</div>
</div>
Browserstack screenshot of Win7/IE10: