Search code examples
cssflexbox

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.

Minimal example html:

<div class="container">
  <section>
    <div class="box">
      some content
    </div>
  </section>
  <section>
    <div class="box">
      some content
    </div>
  </section>
  <section>
    <div class="box">
      some content
    </div>
  </section>
</div>

Minimal example css:

html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
}

.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow-y: scroll;
}

section {
  min-height: 60vh;
  --grad-col: red;
}

section:nth-child(1) {
  --grad-col: red;
}
section:nth-child(2) {
  --grad-col: blue;
}
section:nth-child(3) {
  --grad-col: orange;
}

.box {
  height: 150px;
  margin: 10px;
  background-color: color-mix(in srgb, transparent 50%, var(--grad-col));
}

browser rendered output

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

Solution

  • 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.