Using flex with height in vh flexbox get vertical space

Question

I am using flex property and i have an issue that when i am using height in vh property the boxes are getting spaces vertical.

Below is the code that i have tried.

.detailView {
  background: #f7f7f7;
  padding: 10px;
  margin-top: 5px;
  justify-content: flex-start;
  align-items: center;
  flex-flow: row wrap;
  display: flex;
  height: 100vh;
}

.innerDiv {
  flex: 1 0 219px;
  max-width: 219px;
  align-self: flex-start;
  background: #fff;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  margin: 5px;
}

.insideDiv {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: 150px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="middle-part">
  <div class="detailView">
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
  </div>
</div>

Can anyone help me out and provide me a solution to my problem?

Are you talking about vertical space or horizontal space ? – Shakti Phartiyal May 09 '17 at 08:31 — Shakti Phartiyal, May 09 '17 at 08:31
@ShaktiPhartiyal i am talking vertical space. – LKG May 09 '17 at 08:32 — LKG, May 09 '17 at 08:32

Amal · Answer 1 · 2017-05-09T10:14:07.023

Try setting overflow-y: scroll to .detailView and hide the body scoll

        .detailView {
            background: #f7f7f7;
            padding: 10px;
            margin-top: 5px;
            justify-content: flex-start;
            align-items: center;
            flex-flow: row wrap;
            display: flex;
            height: calc(100vh - 35px);
            overflow-x: hidden;
            overflow-y: auto;
            align-content: flex-start;
        }

        .innerDiv {
            flex:1 0 219px;
            max-width: 219px;
            align-self: flex-start;
            background: #fff;
            box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
            margin: 5px;
        }

        .insideDiv {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            min-height: 150px;
        }
        body {
          overflow: hidden;
        }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="middle-part">
  <div class="detailView">
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
  </div>
</div>

Open your answer in full view and see still vertical spacing are appearing in divs. — LKG, May 09 '17 at 09:53

score 0 · Answer 2 · answered May 09 '17 at 08:37

If you want to remove the vertical spacing between elements, a solution is to add a wrapper inside your flex after .detailView, for example:

<div class="detailView">
  <div id="wrapper" style="position: absolute; display: flex; flex-flow: row wrap; width: 100%; top: 16px;">
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
    <div class="innerDiv">
      <div class="insideDiv">
        <i class="fa fa-file-pdf-o fa-3x"></i>
      </div>
    </div>
  </div>
</div>

If you want to remove the horizontal spacing between elements then remove the margin rule you have inside .innerDiv

Using flex with height in vh flexbox get vertical space

2 Answers2