如何包装水平滚动的弹性项目答案

【问题标题】：how to wrap flex items that scroll horizontally如何包装水平滚动的弹性项目
【发布时间】：2020-03-25 17:36:32
【问题描述】：

所以我遇到了挑战，让弹性项目以 140 像素为底。它们不能更短，因此会在溢出的自动容器中水平滚动。

关键是，我想用盒子阴影包裹所有的弹性项目。不幸的是，包装器不会包裹所有的弹性项目，并且会像溢出的自动容器一样短。

Outer-Wrapper 是灵活的，但在本示例中固定为 400 像素；

这是笔：

.outer-wrapper {
  padding: 0 10px;
  border: 1px solid red;
  width: 400px;
  overflow-x: auto;
}

.wrapper {
  display: flex;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16);
  height: 100px;
  margin: 15px
}

.item {
  flex: 1 0 100px;
  background: pink;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, .16);
}

<div class="outer-wrapper">
  <div class="wrapper">
    <div class="item">item one</div>
    <div class="item">item two</div>
    <div class="item">item three</div>
    <div class="item">item four</div>
    <div class="item">item five</div>
  </div>
</div>

【问题讨论】：

@G-Cyrillus 不，那我就没有可滚动的行了

标签： html css flexbox

【解决方案1】：

使用inline-flex 代替flex 并考虑使用width 代替flex-basis

.outer-wrapper {
  padding: 0 10px;
  border: 1px solid red;
  width: 400px;
  overflow-x: auto;
}

.wrapper {
  display: inline-flex;
  min-width:calc(100% - 30px); /* to make sure it keep a block behavior when there is few items*/
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .16);
  height: 100px;
  margin: 15px
}

.item {
  width:100px;
  flex-grow:1;
  flex-shrink:0;
  background: pink;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, .16);
}

<div class="outer-wrapper">
  <div class="wrapper">
    <div class="item">item one</div>
    <div class="item">item two</div>
    <div class="item">item three</div>
    <div class="item">item four</div>
    <div class="item">item five</div>
  </div>
</div>

<div class="outer-wrapper">
  <div class="wrapper">
    <div class="item">item one</div>
    <div class="item">item two</div>
  </div>
</div>

【讨论】：