Flexbox with wrap and vertical scrollbar if needed

user_3022571 0
Viewed 3543

I am trying to write the css code for a panel that wraps their items from left to right and if there are a lot of items, the vertical scrollbar should be shown in the flex panel to get to see all the items.

I am adding the property overflow-y: auto; but it makes no effect to my layout.

.main-card-flex-container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  overflow-y: auto;
}

.card-flex-container {
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.wrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  max-height: 100%;
}

.card {
  -webkit-order: 0;
  -moz-order: 0;
  -ms-order: 0;
  order: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-align-self: stretch;
  -moz-align-self: stretch;
  -ms-align-self: stretch;
  align-self: stretch;
}

.card-body {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  background-color: #001117;
  color: #ffffff;
  border-radius: 0;
  height: 150px;
  width: 250px;
  position: relative;
  margin-right: 10px;
  margin-bottom: 10px;
}

**HTML**
<div class="main-card-flex-container">
  <div class="card-flex-container wrap">
    <div class="card">
      <div class="card-body">
        <i class="remove-icon"></i>
        <span class="icon"></span>
        <span class="text">Item1</span>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <i class="remove-icon"></i>
        <span class="icon"></span>
        <span class="text">Item2</span>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <i class="remove-icon"></i>
        <span class="icon"></span>
        <span class="text">Item3</span>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <i class="remove-icon"></i>
        <span class="icon"></span>
        <span class="text">Item4</span>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <i class="remove-icon"></i>
        <span class="icon"></span>
        <span class="text">Item5</span>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <i class="remove-icon"></i>
        <span class="icon"></span>
        <span class="text">Item6</span>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <i class="remove-icon"></i>
        <span class="icon"></span>
        <span class="text">Item7</span>
      </div>
    </div>
  </div>
</div>

Any Idea?

flexbox overflow css html
1 Answers

Add height: 100vh instead of min-height to main-card-flex-container and maybe reset the body margin to zero - see demo below:

body {
  margin: 0; /* ADDED */
}

.main-card-flex-container {
  display: flex;
  /*min-height: 100vh;*/
  height: 100vh; /* ADDED */
  flex-direction: column;
  overflow-y: auto;
}

.card-flex-container {
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
}

.wrap {
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  max-height: 100%;
}

.card {
  -webkit-order: 0;
  -moz-order: 0;
  -ms-order: 0;
  order: 0;
  -webkit-flex: 0 0 auto;
  -moz-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  -webkit-align-self: stretch;
  -moz-align-self: stretch;
  -ms-align-self: stretch;
  align-self: stretch;
}

.card-body {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  background-color: #001117;
  color: #ffffff;
  border-radius: 0;
  height: 150px;
  width: 250px;
  position: relative;
  margin-right: 10px;
  margin-bottom: 10px;
}

**HTML**
<div class="main-card-flex-container">
  <div class="card-flex-container wrap">
    <div class="card">
      <div class="card-body">
        <i class="remove-icon"></i>
        <span class="icon"></span>
        <span class="text">Item1</span>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <i class="remove-icon"></i>
        <span class="icon"></span>
        <span class="text">Item2</span>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <i class="remove-icon"></i>
        <span class="icon"></span>
        <span class="text">Item3</span>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <i class="remove-icon"></i>
        <span class="icon"></span>
        <span class="text">Item4</span>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <i class="remove-icon"></i>
        <span class="icon"></span>
        <span class="text">Item5</span>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <i class="remove-icon"></i>
        <span class="icon"></span>
        <span class="text">Item6</span>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <i class="remove-icon"></i>
        <span class="icon"></span>
        <span class="text">Item7</span>
      </div>
    </div>
  </div>
</div>

user_62311530
Related