将容器与左侧对齐并拉伸以完全填满右侧

Question

我想将旋转木马与容器的左侧对齐，并使用剩余空间将右侧拉伸到边缘。请参阅下面的附件。谢谢。

Answer 1

一种方法可能如下所示。基本上允许元素

gallery

溢出并防止外部容器上的滚动条

main

或

body

html,
body {
  overflow-x: hidden;
}

.wrapper {
  width: 400px;
  margin: 0 auto;
}

.gallery {
  background: aliceblue;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 10px 0;

  .item {
    flex: 0 0 250px;
    background: cadetblue;
    padding: 10px;
  }
}

<main>
  <div class="wrapper">
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla rerum voluptatum ex, dolores reiciendis praesentium, assumenda nam ab tenetur nesciunt fugiat molestias totam quas vel eos debitis amet nihil. Asperiores?
    </p>

    <div class="gallery">
      <div class="item">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, id. Aut nulla ab vero corporis cupiditate voluptatem fugiat, deleniti dolores assumenda perferendis facilis delectus officia! Rem maxime repellat quod sunt?
      </div>

      <div class="item">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, id. Aut nulla ab vero corporis cupiditate voluptatem fugiat, deleniti dolores assumenda perferendis facilis delectus officia! Rem maxime repellat quod sunt?
      </div>

      <div class="item">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, id. Aut nulla ab vero corporis cupiditate voluptatem fugiat, deleniti dolores assumenda perferendis facilis delectus officia! Rem maxime repellat quod sunt?
      </div>

      <div class="item">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, id. Aut nulla ab vero corporis cupiditate voluptatem fugiat, deleniti dolores assumenda perferendis facilis delectus officia! Rem maxime repellat quod sunt?
      </div>
    </div>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla rerum voluptatum ex, dolores reiciendis praesentium, assumenda nam ab tenetur nesciunt fugiat molestias totam quas vel eos debitis amet nihil. Asperiores?
    </p>
  </div>
</main>

Answer 2

我已经成功使用下面的 CSS 完成了它：

.wrapper{
    margin-left:calc((100% - 1140px) / 2); /* Container width 1140 */
    display:flex;
    flex-wrap:wrap;
}