This question already has answers here:
flex-grow not sizing flex items as expected
(5 answers)
Closed 5 years ago.
I have a grid in flexbox, like so:
They're all positioned using flexbox, and then the panels themselves (the coloured bits) have margin: 5px.
codepen here: https://codepen.io/callumacrae/pen/bRoZdp
Because the top right section has two elements, there's more margin there, so it's pushing down slightly—I don't want this to happen!
I guess the two possible fixes are either to make the margins not do that, or make the components five pixels smaller instead of five pixels larger like they are right now - but I don't know how to do either of those things.
How can I make adding more elements not change the size of the parent?
The main problem is that you are sizing the elements using flex-grow. flex-grow is not the right property as it, together with flex-shrink is used to distribute the space left (or if to little).
You should use flex-basis, because as soon as you start fill these empty boxes with content, and their content will differ in size, they will misalign even more.
Here is an updated version of yours, where I changed to style="flex-basis: calc(50% - 10px);" (the 10px is to make up for your margins).
Codepen with flex-basis
And here is a version of yours, with the same text I used in mine
Codepen with flex-grow
Related
This question already has answers here:
Grid with viewport height and inner scrolling div
(2 answers)
Closed 4 years ago.
I have a chat system with a very simple header-body-footer layout, except the body needs to be scrollable. I've been trying to come up with a non-hacky (fixed heights for each viewport) solution and this was the final result, which happened entirely by accident:
flex-basis: auto;
overflow-y: scroll;
height: 1px;
It works perfectly across all resolutions, the body takes as much space as it can and the rest of it scrolls as intended. The problem is that i don't really understand this solution, shouldn't flex-basis: auto be sufficient for this calculation to happen? why do i have to set a height?
I've set it as 1px because if height is a value higher than the space available, height takes precedence over flex height.
[flex-basis] defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means "look at my width or height property" (which was temporarily done by the main-size keyword until deprecated). The content keyword means "size it based on the item's content" - this keyword isn't well supported yet, so it's hard to test and harder to know what its brethren max-content, min-content, and fit-content do.
It is likely because when setting it to auto, it is looking for the width or height property, which is otherwise unset.
For more information on flexbox, see https://css-tricks.com/snippets/css/a-guide-to-flexbox/
If you would like the container to grow to the space allocated without defining a set height / width, you can always use flex-grow.
[flex-grow] defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
If all items have flex-grow set to 1, the remaining space in the
container will be distributed equally to all children. If one of the
children has a value of 2, the remaining space would take up twice as
much space as the others (or it will try to, at least).
This question already has answers here:
The difference between percentage and fr units
(3 answers)
Closed 5 years ago.
I've been experimenting with grids in css and come across the following.
I have created a container containing several divs
My .container creates a grid of 5 items having a width of 20%.
I added the grid-column-gap and noticed that it created a overflow in the container. I found that the grid-column-gap adds it's value to the grid-template-columns value. So I changed the value it 19%.
Now the items fit the grid. However my understanding is that grid-column-gap is added between the divs. What I'm having right now is that the last item also contains a gap at the right side.
I want to have the gaps between the divs and not at the end.
Please, see the Fiddle
Can anyone explain what I'm doing wrong?
Percentage units on grid are calculated as any other. If your unit is percentage it will add extra space to whole calculated area.
If however you add fr unit it will work similarly like flexbox and it will not add extra space.
This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 5 years ago.
I am using display: flex to create a responsive card-based dashboard.
Fiddle here.
I noticed that the cards (each individual element div) all shrink or expand vertically to maintain the same size when in a row. So, the height of the biggest (or highest) card is inherited by the rest of the cards in the same row.
Note: When you resize the Fiddle window, you will notice this happens only when more than one card is present in a row. So, when the window is too small to allow only one card horizontally, the size is dependent on the content inside.
I can't seem to figure out which property is doing that so here's my question:
How to get the cards to NOT get resized?
OR
How to retain the responsiveness without using display: flex
If you don't want the cards to be resized, you should had align-items: flex-start on the flex container and remove the min-height: 250px on the cards. Maybe you can set height: auto on the cards
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 7 years ago.
I have made a columnar layout that works fairly well for my needs, but I am experiencing an issue with the height of one column. I have prepared a jsBin that demonstrates the problem;
http://jsbin.com/mawuliyulo/1/edit?html,output
Basically, when you scroll down - eventually you start seeing white on the left side. Is there any way to force this to stretch all the way down indefinitely?
This is not using a flex-box layout. It is simply achieved using :before, and :after pseudo-selectors.
Add position:relative to your main-container class
This question already has answers here:
CSS: Special Fluid Layout Problems
(5 answers)
Closed 3 years ago.
I have the following test code to play around with:
http://jsfiddle.net/b6QFY/1/
I want the "left" element to be fixed and the "right" element to be fluid within the parent container so that it will grow and shrink as the browser width changes, and not wrap. Seems so simple, but have issues getting something to work.
This is what I meant to link to. (I should be getting to bed.)
The core of it:
Padding-left on the container element, absolutely position left element with negative left-margin, and width of 100% on the right element.
To my knowledge this should work in most browsers, except IE6 and possibly 7.
you can use display:inline-block;
this article has will help http://www.tjkdesign.com/articles/liquid/3.asp
Absolute positioning the left element might be the more comprehensive answer when other things come into play, such as container borders and backgrounds and organic growth of the right element.
See my previous answer.