html - Flex nowrap 容器不包裹 child 。当它们的宽度以百分比形式提及时

Question

我有一个可以包裹一些卡片的 flex 容器。我已经用 flex(使用 flex-nowrap)实现了一个水平滚动条。 flex wrapper 容器最初的左间距为 36px，右间距为 0px。这里的问题是在最后一张卡片滚动后我需要有一个 36px 的正确间距。

这是我到目前为止所做的

*{
  box-sizing: border-box;
}

h2 {
  margin: 0;
}

body {
  background: cadetblue;
}

.container {
  width: 500px;
  margin: 0 auto;
  background: #000;
  padding: 20px 36px;
}

.scroll-wrapper {
  overflow: hidden;
  margin-right: -36px;
}

.scroll-inner {
  display: flex;
  flex-flow: row nowrap;
  overflow: auto;
  margin: 0px -16px;
}


.card {
  height: 250px;
  width: 75%;
  flex: 1 0 75%;
  padding: 0px 16px;
}

.inner-wrapper {
  background: #fff;
  height: 250px;
}

<div class="container">
  <div class="scroll-wrapper">
     <div class="scroll-inner">
      <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
       <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
      <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
       <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
       <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
       <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
       <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
       <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
       <div class="card">
        <div class="inner-wrapper"><h2>Card</h2></div>
      </div>
    </div>
  </div>
</div>

我为 wrapper 设置了一个负的右边距，使它看起来像是从右边流出的。一旦滚动/到达最后一个元素，我希望它看起来像这样 enter image description here

我注意到的一件事是我的 scroll-inner(flex-nowrap) 没有包裹整个 child 。我假设我们有五个 child ，每个 child 的宽度都是 50px。滚动内部应该显示 250px 的可滚动宽度，不幸的是，这不是 flex 的行为方式。非常感谢任何帮助或建议。

更新一些显示我真正寻找的图像

滚动期间

滚动到最后一张卡片后

Answer 1

尝试

.scroll-wrapper {
    overflow: hidden;
    margin: auto;
}

.scroll-inner {
    display: flex;
    flex-flow: row nowrap;
    overflow: auto;
    margin: auto;
}