CSS Flexbox annoying slight offset of row elements

Question

So I have two divs in a full width container that I want to give variable sizing with flexbox, but no matter what I do, there is an annoying offset at the bottom. Using margins I can come close to fixing the problem, but it's never perfect.

If you run the code snippet below and scroll to the bottom you can see it, the image and the black content container are not aligned at the bottom.

What's going on?

#container {
    width: 100%;
    display: inline-flex;
    flex-direction: row;
}

#image-wrapper {
    flex-grow: 3;
    max-width: 1000px;
    position: relative;
    /*background-color: black;*/
}

#menu {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px;
    background-color: #101010;
    color: #fefefe;
    align-items: stretch;
    display: flex;
    margin-bottom:7px;
}

#form {
    width: 100px;
}

#image {
    width: 100%;
}

<div id="container">

  <div id="image-wrapper">
    <img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg"/>
  </div>

  <div id="menu">
    <div id="form">
      CONTENT<br>CONTENT<br>
      
    </div>
  </div>

</container>

score 1 · Accepted Answer · answered Jan 31 '18 at 01:57

There is some space below the image since the image is an inline-element and as such there is some space reserved below the (invisble) baseline that the image is aligned to vertically. To avoid that, there are two possible solutions:

1.) Apply display: block; to the image (see first snippet)

or

2.) Apply font-size: 0 to the image container (see second snippet)

#container {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
}

#image-wrapper {
  flex-grow: 3;
  max-width: 1000px;
  position: relative;
  /*background-color: black;*/
}

img {
  display: block;
}

#menu {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background-color: #101010;
  color: #fefefe;
  align-items: stretch;
  display: flex;
}

#form {
  width: 100px;
}

#image {
  width: 100%;
}

<div id="container">

  <div id="image-wrapper">
    <img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" />
  </div>

  <div id="menu">
    <div id="form">
      CONTENT<br>CONTENT<br>

    </div>
  </div>

</div>

SECOND SOLUTION:

#container {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
}

#image-wrapper {
  flex-grow: 3;
  max-width: 1000px;
  position: relative;
  /*background-color: black;*/
  font-size: 0;
}

#menu {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px;
  background-color: #101010;
  color: #fefefe;
  align-items: stretch;
  display: flex;
}

#form {
  width: 100px;
}

#image {
  width: 100%;
}

<div id="container">

  <div id="image-wrapper">
    <img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" />
  </div>

  <div id="menu">
    <div id="form">
      CONTENT<br>CONTENT<br>

    </div>
  </div>

</div>

ohhh css... thanks! – Christopher Reid Jan 31 '18 at 02:15 — Christopher Reid, Jan 31 '18 at 02:15

score 0 · Answer 2 · answered Jan 31 '18 at 01:54

#container {
      width: 100%;
      display: inline-flex;
      flex-direction: row;
    }

    #image-wrapper {
      flex-grow: 3;
      max-width: 1000px;
      position: relative;
      /*background-color: black;*/
    }

    #menu {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 50px;
      background-color: #101010;
      color: #fefefe;
      align-items: stretch;
      display: flex;
      margin-bottom:4px;

    }

    #form {
      width: 100px;
    }

    #image {
      width: 100%;
    }

<div id="container">

  <div id="image-wrapper">
    <img id="image" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg"/>
  </div>

  <div id="menu">
    <div id="form">
      CONTENT<br>CONTENT<br>
      
    </div>
  </div>

</container>

Looks like the margin is just a bit off

CSS Flexbox annoying slight offset of row elements

2 Answers2