html - Flexbox 和溢出 :scroll

Question

我试图在 flexbox 中使用 overflow-x:scroll 让这些元素有 25% 的宽度。将有 4 个以上的元素，所以我的目标是前 4 个中的每一个都获得 25%，其余的是可滚动的。我当前的设置不会为每个元素返回 25%。你能帮帮我吗？

谢谢。

#wrapper {
  padding: 0 10px;
  max-width: 1400px;
  margin: 0 auto;
}

.cont25 {
  width: 25%;
  background: black;
  height: 20vw;
  margin: 10px;
  max-height: 280px;
  flex: none;
}

.flex {
  display: flex;
}

#novinky .flex {
  overflow-x: scroll;
}

<div id="wrapper">
  <div class="outterBox" id="novinky">
    <div class="flex">
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
    </div>
  </div>
</div>

Answer 1

您将 width 设置为 25%，但忘记了边距。您可以通过对宽度进行少量计算来完全显示这 4 个元素:width: calc(25% - 20px);，其中 20px 是左右 margin 每一项。这是一个例子:

#wrapper {
  padding: 0 10px;
  max-width: 1400px;
  margin: 0 auto;
}

.cont25 {
  width: calc(25% - 20px);
  background: black;
  height: 20vw;
  margin: 10px;
  max-height: 280px;
  flex: none;
}

.flex {
  display: flex;
}

#novinky .flex {
  overflow-x: scroll;
}

<div id="wrapper">
  <div class="outterBox" id="novinky">
    <div class="flex">
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
      <div class="cont25">
        <p>25%</p>
      </div>
    </div>
  </div>
</div>