Flex nowrap 容器不包裹孩子。当那些的宽度以百分比提到时答案

【问题标题】：Flex nowrap container not wrapping child. when the width of those are in mentioned in percentageFlex nowrap 容器不包裹孩子。当那些的宽度以百分比提到时
【发布时间】：2021-06-09 11:29:52
【问题描述】：

我有一个包装一些卡片的弹性容器。我已经用 flex 实现了一个水平滚动条（使用 flex-nowrap）。弹性包装容器最初的左间距为 36 像素，右间距为 0 像素。这里的问题是在滚动最后一张卡片后，我需要有 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>

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

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

更新几张显示我真正想要的东西的图片

滚动期间

滚动到最后一张卡片后

【问题讨论】：

标签： html css flexbox

【解决方案1】：

试试

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

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

【讨论】：

嗨，丹尼尔。我故意为滚动包装添加了一个负的右边距，我希望卡片从最右边流出而没有间距。问题是，一旦滚动并到达最后一张卡片，我希望出现该间距。下面是我想使用 CSS 网格来实现的。我期待使用 flex codepen.io/dannievinther/pen/82398fb3e5f4e01e64f08164737a8291 来实现这一目标
@Vinu Prasad，我更新了我的答案，请检查一下。
请在您的答案中添加一些解释，以便其他人可以从中学习
@Daniil。感谢并感谢您的努力。我想我无法正确传达我真正想要的东西。我用几张图片更新了我的问题，我认为这会增加清晰度。
@Daniil，别担心，希望有一天我能弄清楚并在这里发布答案。再次感谢所有的努力，干杯！！

【解决方案2】：

我找到了解决方法，希望这对某人有所帮助。

*{
  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;
}


.card {
  height: 250px;
  width: 75%;
  flex: 1 0 75%;
  padding-right: 40px;
  margin-right: -8px;
}

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

如果有人有更好的解决方案，请回答！谢谢

【讨论】：