Anchor controls using flexbox

Question

I'm trying to create a visual layout using Flexbox.

In this layout, controls are arranged in rows. Some of the rows will have a predefined height, and some of the rows will be anchored to both the top and bottom of the screen, which means they'll stretch their height to occupy all available space.

I've got a working layout that will achieve this, but there seems to be an issue when the rows with predefined height need stretch because their contents no longer fit. They seem to not actually be stretching, which causes them to overlap with one another.

Anyone know how to get the rows to resize in height, properly?

You can have a look at the current status here:

https://jsfiddle.net/cgledezma1101/o9zwa7na/

I'm using the following CSS for my containers:

.main-container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  height: 100vh;
}

.row {
  flex: 1 1 auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  width: 100%;
}

.row2 {
  height: 200px;
  min-height: 200px;
}

.row1 {
  height: 100px;
  min-height: 100px;
}

.not-anchored {
  height: 100px;
}

.anchored {
  height: 100%;
}

score 1 · Accepted Answer · answered Jul 20 '17 at 01:15

A fixed height on the container means it cannot expand to accommodate a taller layout. Hence, flex items are forced to overlap on smaller screens.

Instead of height: 100vh, use min-height: 100vh.

Also, remove fixed heights on flex items. They override align-items: stretch.

revised fiddle

.main-container {
  display: flex;
  flex-flow: column nowrap;
  min-height: 100vh;
}

.row {
  display: flex;
  flex-flow: row wrap;
}

.row.anchored { flex: 1; }

body { margin: 0; }


.item12 {
  flex: 1 1 100px;
  height: 200px;
  min-width: 100px;
  background: tomato;
}

.item21 {
  flex: 1 1 200px;
  height: 100px;
  min-width: 100px;
  background: deepskyblue;
}

.item {
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 3em;
  border: 1px dashed black;
  line-height: 100px;
  margin-left: auto;
  margin-right: auto;
}

.item.anchored {
  flex: 1;
  /* height: 100%; */
  min-height: 150px;
  background: hotpink;
}

<body>
  <div class="main-container">
    <div class="row row2 not-anchored">
      <div class="item item12">
        1.1
      </div>
      <div class="item item12">
        1.2
      </div>
      <div class="item item12">
        1.3
      </div>
    </div>
    <div class="row anchored">
      <div class="item anchored">
        A.1
      </div>
    </div>
    <div class="row row1 not-anchored">
      <div class="item item21">
        2.1
      </div>
      <div class="item item21">
        2.2
      </div>
    </div>
    <div class="row anchored">
      <div class="item anchored">
        A.2
      </div>
    </div>
  </div>
</body>

Brett DeWoody · Answer 2 · 2017-07-19T23:49:25.397

It seems the issue arises from giving the .main-container element a height: 100vh;. Changing that to height: 100%; seems to fix it.

.main-container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  height: 100%;
}

.main-container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  height: 100%;
}

.row {
  flex: 1 1 auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  width: 100%;
}

.row2 {
  height: 200px;
  min-height: 200px;
}

.row1 {
  height: 100px;
  min-height: 100px;
}

.not-anchored {
  height: 100px;
}

.anchored {
  height: 100%;
}

.item12 {
  flex: 1 1 100px;
  height: 200px;
  min-width: 100px;
  background: tomato;
}

.item21 {
  flex: 1 1 200px;
  height: 100px;
  min-width: 100px;
  background: deepskyblue;
}

.item {
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 3em;
  border: 1px dashed black;
  line-height: 100px;
  margin-left: auto;
  margin-right: auto;
}

.item.anchored {
  flex: 1 1 100%;
  height: 100%;
  min-height: 150px;
  background: hotpink;
}

<body>
  <div class="main-container">
    <div class="row row2 not-anchored">
      <div class="item item12">
        1.1
      </div>
      <div class="item item12">
        1.2
      </div>
      <div class="item item12">
        1.3
      </div>
    </div>
    <div class="row anchored">
      <div class="item anchored">
        A.1
      </div>
    </div>
    <div class="row row1 not-anchored">
      <div class="item item21">
        2.1
      </div>
      <div class="item item21">
        2.2
      </div>
    </div>
    <div class="row anchored">
      <div class="item anchored">
        A.2
      </div>
    </div>
  </div>
</body>

The following produces:

Ran this on local browser, SO snippet and JSFiddle. On all of them, there's still the issue of the collapsed row overlapping with the following row. — cgledezma, Jul 19 '17 at 23:48
On your example, if you make the window smaller, you'll eventually see 2.2 disappear behind A.2 — cgledezma, Jul 20 '17 at 00:04
Also, if you give .item12 a min-width of, say, 300px, you'll see 1.x disappear behind A.1 — cgledezma, Jul 20 '17 at 00:07
This solution won't work. `height: 100%` needs the parent height to be defined. https://stackoverflow.com/a/31728799/3597276 — Michael Benjamin, Jul 20 '17 at 00:26

Anchor controls using flexbox

2 Answers2