I'm trying to make a chat layout. So i have 3 divs, activeUSer - top, messages middle (has to fill the space between 1 and 3), actions - bottom
Now, I've put flex-direction row. and it works fine. I needed the bottom div to grow if the input grows (if you have 2 or more lines of writing)
It worked ok untill I added display:flex to the Actions div (bottom). I needed another flex layout for input and buttons. Now it does not care for the padding i've set on the last div
Here is my codepen https://codepen.io/capraruioan/pen/XKWxrV
#content {
height: 300px;
display: flex;
flex-direction: column;
}
.activeUser {
height: 66px;
background-color: yellow;
}
.Messages {
flex: 1 1 100%;
}
.Actions {
flex-grow: 1;
display: flex;
padding-top: 2px;
padding-bottom: 20px;
}
.aa { //the inputbox
border: 1px solid black;
min-height: 10px
}
fixed it by letting display default on the 3rd div and placing a div with display flex inside
Related
How can I get all elements to fit in a container element that is fixed to the size of the window?
I have a container element that is fixed position and flexbox, it does not stay within window. The menu is 50px and I want the main element to fill the remainder of the window height.
I have a container my-app and inside it, 2 vertically stacked elements (flex-direction = column). It works as expected in Chrome but not Edge or Firefox.
my-app {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
app-menu {
border-bottom: 2px solid black;
width: 100%;
height: 50px;
background: lightcoral;
box-sizing: border-box;
}
app-my-view {
display: flex;
flex: 1;
width: 100%;
background: lightgreen;
}
https://stackblitz.com/edit/2-column-scroll-v2
I've got it working by using a fixed position menu sticking to the top and using padding to offset menu height in the main content area. However I thought it would be better to use approach with 2 stacked elements without using fixed menu .
See here: https://stackblitz.com/edit/2-column-scroll-v1
I'm using flexbox to create a responsive design and I have it working for a smaller width, so I'm keen to keep this layout and am just overwriting certain parts to get a different layout.
In my JSFiddle, you can see I have a .featured article (orange) which sits to the left of the viewport. I then have a number of smaller articles which I want to have sitting on the right of .featured
Using display:flex; with flex-wrap:wrap; gets the first item to sit to the right, but the subsequent green boxes all sit below. It seems my first green article is getting the full height of the row that it sits on.
How can I tidy up this layout to get the green articles to sit to the right?
.summaries {
display: flex;
flex-wrap: wrap;
text-align:right;
article {
display: flex;
flex-wrap: wrap;
margin-left: 24px;
width: calc(60% - 24px);
}
}
article {
height: 100px;
background-color: green;
outline: 1px solid black;
&.featured {
height: 500px;
flex: 0 0 calc(40% - 24px);
margin-left: 0;
margin-right: 24px;
background-color: orange;
}
}
(I'm using Chrome v.39+)
I'm trying to use the flex-wrap property to stack child divs both horizontally and vertically, but I'm seeing some very strange behaviors. For example, if there's 3 child divs and the last is given a width of 100% (causing it to wrap) there will be unwanted gaps introduced.
Sometimes I can force the first 2 divs to honor align-items: stretch by giving them height: 100% or height: calc(100% - 1px), other times they won't stretch passed the mysterious gap, and sometimes they'll even disappear all together if I try to force them to stretch.
Here's a simplified example of the problem. They grey shouldn't be visible.
Why are these gaps appearing in flex-wrapped divs and how can I prevent them?
The gray area is still visible at the bottom because you set a height on the parent container.
If you don't want to see that gray area, remove the height from the container and add a fixed height that you require on one of the elements in the first row
DEMO
.a {
width: 300px;
display: flex;
flex-wrap: wrap;
position: relative;
top: 100px;
left: 200px;
background-color: #999;
}
.b {
height: 150px;
background-color: #00ff00;
}
.c {
background-color: #0000ff;
}
.d {
background-color: #ff0000;
}
.b {
flex-grow: 1;
flex-shrink: 0;
}
.c {
width: 5px;
flex-shrink: 0;
}
.d {
width: 100%;
height: 10px;
flex-shrink: 0;
}
<div class='a'>
<div class='b'></div>
<div class='c'></div>
<div class='d'></div>
</div>
Note: If you want to avoid fixed dimensions - just remove the height:10px from the red div.
This will ensure that there are no gaps and that each row has equal height
DEMO
I have the following arrangement via flexbox with flex-wrap and elements able to stretch using flex-grow:
Each item has a margin on all sides. This is to separate the items from each other, but the side effect is the whole block has margins which I'd like to collapse. It could be done with rules like nth-child(-n+3) { margin-top: 0; } but because the container size could vary, there could be any number of items per row and any number of rows. So I'm wondering if flex-box has any way to collapse the outer margins in a setup like this, while retaining the margins between items.
JSBin
The HTML is simply 6 items inside a container.
The CSS (Sass) is as follows:
.container
display: flex
flex-wrap: wrap
background: #eef
align-items: stretch
.item
flex-grow: 1
margin: 1em
border: 1px solid black
padding: 1em
min-width: 6em
It's a bit of a hack, but you can add a negative margin on the flex container to cancel out the items' margins along the edges, and then move its "background" styling to a parent wrapper-element.
Updated JSBin
Updated CSS (SASS):
.wrapper
background: #eef
border: 1px solid darkgray
.container
display: flex
flex-wrap: wrap
margin: -1em
.item
flex-grow: 1
margin: 1em
border: 1px solid black
padding: 1em
min-width: 6em
Another hack is to split the margin responsibilities between container and item, each caring about half (say $margin is 1em):
• container cares about its bottom margin and half left + half-right of items:
.container {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap; // Go to next line if not enough space
padding-top: 0; // Let items handle top
padding-left: $margin/2; // Handle half of left
padding-bottom: $margin; // Handle bottom
padding-right: $margin/2; // Handle half of right
}
• items care about top and half left + half right:
.item {
flex-grow: 1; // Use available space
margin-left: $margin/2; // Handle other half of left
margin-right: $margin/2; // Handle other half of right
margin-top: $margin; // Handle top
}
Regarding items size, you can set a width if you want items to look the same.
.item.fixed {
width: 15em;
}
See a demo here.
I want to make some kind of image viewer with some descriptive text below. Problem is, that the lower box with the description has a fixed height and the image should fill the remaining height of whatever container it is in.
I wanted to use flexbox for that, as I think it seems to be the most elegant and simple solution (without using JS).
This this code and codepen for my current work, which seems to work mostly:
html, body, #container {
height: 100%
}
#container {
display: flex;
flex-direction: column;
}
#container > #image {
/* flex-grow: 1; */ /* not needed here? */
max-width: 75%;
background-color: #fcc;
margin: 0 auto;
}
img {
max-height: 100%;
/* HERE IS WHERE MY PROBLEM STARTS!; */
max-width: 100%;
}
#container > #text {
flex-grow: 0;
flex-shrink: 0;
background-color: rgba(128, 128, 128, 0.7);
padding: 5px;
max-width: 75%;
margin: 15px auto 0;
/* TOP MARGIN DOESN'T WORK */
}
http://codepen.io/Kageetai/pen/AaCJy
I got most of it to work but the image is not resizing itself correclty. As you can see through the transparent background of the text box, it stretches itself over the border of the containing div and even behind the text box.
So how can I retain the image with the correct aspect ratio inside its container?
And furthermore the centering with margin: 0 auto; seems to make problems when resizing the window. The image is not centered anymore and the page needs a refresh to make it work again.
So does anyone know how to make the image behave correctly? :)
For image , you can set an height, margin and display.
For image container, give a 2 or 3 value to flex and none to other, so it fills as much space as avalaible.
DEMO
CSS used :
html,
body,
#container {
height: 100%
}
#container {
display: flex;
flex-direction: column;
}
#container > #text {
background-color: #ccf;
padding: 5px;
}
#container>#image {
flex:3;
display:flex;
}
img {
width:auto;
display:block;
margin:auto;
height:100%;
}
Here's a more basic demo of how to achieve this.
<html style="height: 100%">
<body style="height: 100%; margin: 0; display: flex; flex-direction: column">
<p>Toolbar</p>
<div style="background: #bbb; flex: 1">Image</div>
</body>
</html>
A demo can be seen over at Codepen.