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
Related
Goal
Create a vertical carousel containing square items with up / down navigation across various pages. It should take up it's parent container's height and with it's width set automatically.
Approach
I used a nested grid layout, where the first grid represents a "page", taking up 100% of the parent's container. The second grid is nested in the first grid, taking up the remaining space with an equally divided height. This allows me to achieve most of what I need except that the nested grid width is not following it's children.
Problem
My current approach does not allow the nested grid to respect the children's width as seen in the above image. I need the width to be reflected correctly so that I can center the up / down buttons centrally. Does anyone know why is the grid width not respecting the children? And are there any other solutions for centering the elements aside from doing a margin offset on the 2 buttons?
Sample code
https://codesandbox.io/s/sharp-tdd-2rgb6e?file=/src/App.tsx
Note that this code does not include any translation logic, overflow is disabled so that the pages are visible.
This question already has answers here:
Why is a flex item limited to parent size?
(1 answer)
Why don't flex items shrink past content size?
(5 answers)
Closed 3 years ago.
The MDN docs for flex-wrap said
nowrap
The flex items are laid out in a single line which may cause the flex
container to overflow.
While on this particular page it has 2 nowrap examples show 2 different effects, the first one on the top show overflow effect, while the second one on the bottom show that the items shrink to fit inside the container.
Why is that ?
This question already has answers here:
Fill the remaining height or width in a flex container
(2 answers)
Closed 4 years ago.
Hey Guys I'm making a job application form for a website. I'm using flexbox for the layout but on <div class="row row-9"> I have one label element that sits on the left side and one input element on the right side. I'm using justify-content: space-between; to separate them apart. However I want the input field to expand to fill all of that empty space. Would i do this with the width property? Also Am I even making this form right I have s many css rules with one property and the html doesn't look good either. I've only made one other form before. Thanks for your help:)
https://jsfiddle.net/wpm1crtz/1/
input{
flex:2
}
Or however width You want to make the the input.
for example if you put flex:2 , it will essentially take up 66% of the row,
flex:1 would take up 50% etc.
This question already has answers here:
Centered elements inside a flex container are growing and overflowing beyond top [duplicate]
(3 answers)
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 4 years ago.
I am new to flexbox and now I am trying to align items both vertically and horizontally. I started to google and found quite enough answers. All of them are based on the same strategy: to add some css rules to parent block:
display: flex;
align-items: center;
justify-content: center;
But I also want so that parent block was 100% height of window. So I made 100% of html, body and parent block. From the first sight everything works. But then I noticed a problem. When I shrink a browser so that child block does not fit browser window, top part of child centerd block is not visible.
Here is an example. When you open it you see red top border. But if you decrease size of the area for displaying so that the square does not fit that area you do not see a top border. It is lost.
I saw this answer but the problem also exists in the first accepted answer. What should I do to resolve this?
Update
Here is what I get:
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