Flexbox footer erroneously shrinking

Question

I am using a flexbox to divide up the space on a webpage. I have a main area with SVG and a sticky footer. The footer has a button that changes its text when the mouse enters and leaves. The problem is that the footer temporarily slides down when this happens.

See here: http://jsfiddle.net/nicmcd/zb149q0k/49/

Through debugging I've found that the offending CSS style that causes this is that the SVG area is set to a height of 100%:

svg {
    width: 100%;
    height: 100%;  /* this is the offensive style */
    top: 0;
    left: 0;
}

My dilemma is that I need the SVG set to a height of 100% because I want it to consume all the space the footer doesn't take.

One weird thing is that after the footer slides away, it comes back if the window is resized.

Please help!

Just to be clear: you want the SVG to expand to fill remaining space? So, the circles would get bigger or smaller depending on the size of the footer? — RobertAKARobin, Jul 03 '18 at 14:57
No, I'll draw the SVG (and transform it as necessary). I just don't want the footer to disappear and I want the SVG area to be the rest of the page. — nic, Jul 03 '18 at 14:58

Michael Benjamin · Accepted Answer · 2018-07-03T16:15:34.503

Instead of this:

#content #drawing {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
    background-color: red;
}

svg {
    width: 100%;
    height: 100%; /* this is the offensive style */
    top: 0;
    left: 0;
}

Try this:

#content #drawing {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
    background-color: red;
    display: flex; /* new */
}

svg {
    width: 100%;
    /* height: 100%; removed offensive style :-) */
    top: 0;
    left: 0;
}

revised jsfiddle

When you set an element to display: flex (making it a flex container) that automatically activates align-items: stretch, which tells child elements (aka "flex items"; in this case, the svg element), to expand the full length of the container along the cross-axis (in this case, the height).

So there is no need for percentage heights, fixed heights or calc() functions. With flex properties, the svg can be directed to consume available space, eliminating any interference with the footer.

score 0 · Answer 2 · answered Jul 03 '18 at 15:15

I set the flex layout of the footer to use a pixel sized basis (45px) and changed the height of the svg to a calculation that discounts the footer height using calc(100% - 45px). This seems to resolve the weird shrinking behavior. Please see the attached snipped. Hope it helps.

document.getElementById("hi").addEventListener("mouseenter", function() {
 this.innerHTML = "Hello";
});

document.getElementById("hi").addEventListener("mouseleave", function() {
 this.innerHTML = "Goodbye";
});

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow: hidden;
}

#content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: white;
}

#drawing {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
    background-color: red;
}

#menu {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 45px;
    background-color: blue;
}

#menuitems {
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    justify-content: center;
    cursor: default;
    color: #ccc;
}

.menuitem {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 10px;
    white-space: nowrap;
    width: auto;
    border: 2px dashed #ccc;
    border-radius: 5px;
    margin: 5px;
    padding: 5px;
}

svg {
    width: 100%;
    height: calc(100% - 45px);
    top: 0;
    left: 0;
}

<div id="content">
  <div id="drawing">
    <svg>
      <g>
        <circle cx="40" cy="40" r="24"/>
        <circle cx="80" cy="80" r="24"/>
        <circle cx="120" cy="120" r="24"/>
        <circle cx="160" cy="160" r="24"/>
      </g>
    </svg>
  </div>
  <div id="menu">
    <div id="menuitems">
      <div class="menuitem" id="hi">Hi</div>
    </div>
  </div>
</div>

This doesn't work. It leaves the SVG not consuming the whole space. I changed the fiddle to have a red background where the SVG is not. You'll see it is not consuming the whole space. — nic, Jul 03 '18 at 17:05

score -1 · Answer 3 · answered Jul 03 '18 at 15:22

-1

http://jsfiddle.net/zb149q0k/101/ I made a working fiddle using percentage units for height of divs. Svg styles stayed the same.

svg {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
}

I could not track the issue, but made it work for you. Hope it helps :)

answered Jul 03 '18 at 15:22

Pikeo

42
1
6

This functionally works but is not what I asked for. I don't want the footer to change in size. – nic Jul 03 '18 at 17:04

Flexbox footer erroneously shrinking

3 Answers3