溢出在主页上而不是轮播部分

Question

我想要一个完全响应移动设备的页面，并且有一个我想要的半旋转木马滑块 overflow。但是我在页面上有水平溢出而不是轮播部分。
我不想在我的主页上溢出

为什么溢出应用于 html 文档 ??

调整代码大小，在 530 像素以下显示 overflow

main{
  display: grid;
  grid-template-columns:1fr;
  gap: 2rem;
  border: 2px solid red;
}
section{
  background: gold;
}
.container{
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  gap: 1rem;
}
.box{
  width: 50%;
  flex-shrink: 0;
  padding:2rem;
  background: gray;
}

<main>
  <section>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  </section>
  <section>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  </section>
  <section>  <!--  carousel section -->
    <div class="container"> 
      <div class="box">
        <h4>lorem</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae nulla diam in ac </p>
        <div>
          <img src="#" alt="image">
          <div>
            <h4>lorem</h4>
            <p>lorem</p>
          </div>
        </div>
      </div>
      <div class="box">another box</div>
      <div class="box">another box</div>
      <div class="box">another box</div>
    </div>
  </section>
  <section>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  </section>
  <section>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  </section>
</main>

Answer 1

将您的网格更改为 flex 以防止溢出

main{
  display:flex;
  flex-direction: column;
  gap: 2rem;
  border: 2px solid red;
}

Answer 2

我已将 CSS 网格添加到您的 <section>

section {
    display: grid;
    /* your code*/
}

main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  border: 2px solid red;
}

section {
  background: gold;
  display: grid;
}

.container {
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  gap: 1rem;
}

.box {
  width: 50%;
  flex-shrink: 0;
  padding: 2rem;
  background: gray;
}

<main>
  <!-- 1 lorem -->
  <section>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
  <!-- 2 lorem -->
  <section>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</section>

  <!-- 3 -->
  <section>
    <!--  carousel section -->
    <div class="container">
      <!-- 1 box -->
      <div class="box">
        <h4>lorem</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae nulla diam in ac </p>
        <div>
          <img src="#" alt="image">
          <div>
            <h4>lorem</h4>
            <p>lorem</p>
          </div>
        </div>
      </div>

      <!-- 2 box -->
      <div class="box">another box</div>
      <!-- 3 box -->
      <div class="box">another box</div>
      <!-- 4 box -->
      <div class="box">another box</div>
    </div>
  </section>

  <!-- 4 lorem -->
  <section>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</section>
  <!-- 5 lorem -->
  <section>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</section>
</main>

Answer 3

您可以通过将列的宽度设置为 100% 而不是 1fr 来解决它。

通过使用 1fr，分数大小将占用最大元素的宽度，在您的情况下，轮播的宽度，这就是它溢出的原因。

main {
  display: grid;
  grid-template-columns: 100%;
  gap: 2rem;
  border: 2px solid red;
}

section {
  background: gold;
}

.container {
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  gap: 1rem;
}

.box {
  width: 50%;
  flex-shrink: 0;
  padding: 2rem;
  background: gray;
}

<main>
  <section>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  </section>
  <section>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  </section>
  <section class="carousel-section">
    <!--  carousel section -->
    <div class="container">
      <div class="box">
        <h4>lorem</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae nulla diam in ac </p>
        <div>
          <img src="#" alt="image">
          <div>
            <h4>lorem</h4>
            <p>lorem</p>
          </div>
        </div>
      </div>
      <div class="box">another box</div>
      <div class="box">another box</div>
      <div class="box">another box</div>
    </div>
  </section>
  <section>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  </section>
  <section>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  </section>
</main>

Answer 4

我在 article from Ahmad Shadeed

中找到了我的问题的完整答案

CSS 网格中的最小内容大小

CSS 网格的子项的默认最小内容大小为 auto。也就是说，如果有一个元素比网格项大，它就会溢出。
为了解决这个问题，我们有三种不同的解决方案：

使用minmax()

grid-template-columns: minmax(0, 1fr) for my problem.

正在将 min-width = 0 应用于网格项
将 overflow: hidden 添加到网格项目

我将所有三个 sulotions 添加到下面的代码片段中，您可以单独使用每一个。

main{
  display: grid;
  grid-template-columns: minmax(0, 1fr);  /*  first ssolution */
  gap: 2rem;
  border: 2px solid red;
}
section{
  background: gold;
  min-width: 0; /*  second  ssolution */ 
  overflow: hidden; /*  third  ssolution */
}
.container{
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
  gap: 1rem;
}
.box{
  width: 50%;
  flex-shrink: 0;
  padding:2rem;
  background: gray;
}

<main>
  <section>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  </section>
  <section>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  </section>
  <section>  <!--  carousel section -->
    <div class="container"> 
      <div class="box">
        <h4>lorem</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vitae nulla diam in ac </p>
        <div>
          <img src="#" alt="image">
          <div>
            <h4>lorem</h4>
            <p>lorem</p>
          </div>
        </div>
      </div>
      <div class="box">another box</div>
      <div class="box">another box</div>
      <div class="box">another box</div>
    </div>
  </section>
  <section>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
  </section>
  <section>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  </section>
</main>

溢出在主页上而不是轮播部分

overflow on main page instead of carousel section

css

grid

overflow

flexbox

CSS 网格中的最小内容大小