All Questions

319
votes
4answers
58914 views

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Consider the main axis and cross axis of a flex container:                        &...
76
votes
1answers
6623 views

Why don't flex items shrink past content size?

I have 4 flexbox columns and everything works fine, but when I add some text to a column and set it to a big font size, it is making the column wider than it should be due to the flex property. I tri...
27
votes
2answers
34445 views

Flexbox code working on all browsers except Safari. Why?

Grid columns with list tags, I need to display in correct order per every 3 columns, with auto width enabled for every extra HTML list elements. This is my example: <style> ul { ...
18
votes
5answers
4343 views

Is it possible for flex items to align tightly to the items above them?

This is, in effect, the Pinterest layout. However, the solutions found online are wrapped in columns, which means the container inadvertently grows horizontally. That is not the Pinterest layout, and ...
259
votes
7answers
384674 views

Flexbox: center horizontally and vertically

How to center div horizontally, and vertically within the container using flexbox. In below example, I want each number below each other (in rows), which are centered horizontally. .flex-containe...
117
votes
2answers
69152 views

Chrome / Safari not filling 100% height of flex parent

I want to have a vertical menu with a specific height. Each child must fill the height of the parent and have middle-aligned text. The number of children is random, so I have to work with dynamic va...
304
votes
19answers
360450 views

How do I keep two divs that are side by side the same height?

I have two divs side by side. I'd like the height of them to be the same, and stay the same if one of them resizes. I can't figure this one out though. Ideas? To clarify my confusing question, I'd li...
7
votes
3answers
2295 views

Make container shrink-to-fit child elements as they wrap

I'm trying to figure out how flexbox works (supposed to work?…) for cases like below: .holder { width: 500px; background: lightgray; display: flex; flex-direction: row; justify-c...
110
votes
3answers
27449 views

What are the differences between flex-basis and width?

There have been questions and articles about this, but nothing conclusive as far as I can tell. The best summary I could find is flex-basis allows you to specify the initial/starting size of the e...
82
votes
5answers
11282 views

Can't scroll to top of flex item that is overflowing container

So, in attempting to make a useful modal using flexbox, I found what seems to be a browser issue and am wondering if there is a known fix or workaround -- or ideas on how to resolve it. The thing I'm...

Previous Next