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

【问题标题】：Flexbox with wrap and vertical scrollbar if needed如果需要，带有换行和垂直滚动条的 Flexbox
【发布时间】：2018-03-13 08:54:55
【问题描述】：

我正在尝试为从左到右包装项目的面板编写 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>

有什么想法吗？

【问题讨论】：

标签： html css flexbox overflow

【解决方案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>

【讨论】：

你早了 30 秒，所以我删除了我的 ... +1
嘿，它可以工作，但最后一行没有显示完整。如果我将高度降低到 80vh，它会按预期工作。如何写出高度的值以获得通用解决方案？
@MrScf 它不适合我...重置body 边距？
是的，我尝试使用 body margin 0 但它没有改变。好吧，这是一个局部视图，也许有任何配置避免获得值为100vh的预期效果。