CSS vertical scroll max width

I need your help!

The designer did that:

But I can't display the list like that !

I need to have a max width on my container! How my horizontal list can be align on left side and not affected by the max width on the right side ? :'(

Solution

That is a conundrum. I would use position:absolute to get out of the edge of container. If the container is position:relative you wouldn't be able to do that. Play around with the width of the cards container to see what fits your needs because you can't really snap it to the right side exactly, you'd need to overflow it (so make body {overflow-x:hidden}).

body {
  overflow-x: hidden;
}

.container {
  margin: auto;
  max-width: 400px;
  border: 1px solid red;
}

.strip-right {
  position: absolute;
  height: 50px;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.strip-placeholder {
  height: 50px;
}

.card {
  width: 50px;
  height: 50px;
  background: purple;
}

<body>
  <div class="container">

    <h2>hello world</h2>

    <div class="strip-right">
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
    </div>
    <div class="strip-placeholder"></div>

    <p>
      other content 1
    </p>
    <p>
      other content 2
    </p>
    <p>
      other content 3
    </p>
    <p>
      other content 4
    </p>
  </div>
</body>