如果需要，带有换行和垂直滚动条的 Flexbox

Question

我正在尝试为从左到右包裹项目的面板编写CSS代码，如果有很多项目，垂直滚动条应该显示在弹性面板中以查看所有项目。

我正在添加属性Overflow-y: auto; 但这对我的布局没有影响。

.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>

任何想法？

Answer 1

添加height: 100vh而不是min-height添加main-card-flex-container，并且可能将边距重置body为零 - 请参阅下面的演示：

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>