Question 299419 in CSS Question posted in
Some basic documentation can be found here.

Css – Elements overlap in vertical flexbox column layout

I have a layout single-column css layout, where each of the elements in the column is a <section> tag, and they have min-height: 60vh configured.
This works well until I make the whole layout a flexbox with direction column:
When the content of a section is vertically larger than 60vh (On sufficiently small screens) then elements overlap – their height is only 60vh.

enter image description here

How can I prevent this, without changing the flex-layout, and while still guaranteeing that each element is at least 60vh high?

https://codepen.io/rastaiari/pen/BaMvber

Tags:

2

Answers


  1. 0

    You can use flex-shrink:0; to keep the sections from collapsing

    section {
  min-height: 60vh;
  flex-shrink:0;
  min-width: 200px;
  text-align: center;
  background-size: 20px 20px;
  --grad-col: red;
  background-image: repeating-linear-gradient(45deg, var(--grad-col) 0, transparent 1px, transparent 0, transparent 50%);
}
    Login or Signup to reply.
  2. 0

    add to section flex: none;

    The item is sized according to its width and height properties. It is fully inflexible: it neither shrinks nor grows in relation to the flex container. This is equivalent to setting flex: 0 0 auto.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search