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

Posted 2023-03-05

【中文标题】如果需要，带有换行和垂直滚动条的 Flexbox

【英文标题】：Flexbox with wrap and vertical scrollbar if needed

【发布时间】：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>

有什么想法吗？

【参考方案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的预期效果。