-1

I'll try to set a fix value to the height of an outer flexbox item in a nested solution with no luck.

Trying height, fixed-height, max-height on both flex-container and flex-item.

To demonstrate I have create a codepen:

Codepen-Example

Optimal all the cards should be 400px or 80% or evt. windows.height - 100px. (optional).

I tried also a couple of other questions/answers in that direction, for e.g.

but in none of them I found the fitting solution.

I hope it's just a simple attribute at the right place to solve it.

If something is unclear, or need more description, let me know in what direction I should enhance the question.

CodeFreezr
  • 362
  • 2
  • 18

1 Answers1

1

Just set a fixed height on your .flex-item class. Then deal with the ugly overflow scrollbars (maybe style them rather than just hide overflow, though this is beyond the scope of this particular fix). I hope I've not misunderstood what you're after.

.flex-item {
    ...
    height: 400px;
}

Here's the adapted version of your layout https://codepen.io/thejonsilver/pen/PQvZVv

  • Ah, thanks for taking my tomatos from my eyes. The trick that solved my issue was to drop "min-height=100vh". Ok, now I can jump into the overflow-challenge <;-)* – CodeFreezr Mar 04 '18 at 19:55