overflow on main page instead of carousel section-CodePudding

I want to have a fully responsive page for mobile devices , and there is a semi carousel slider that i wanna it have overflow . but i have horizontal overflow on page instead of carousel section.
i don't want to have overflow on my main page

why overflow be applied to html document ??

resize the code , below 530 px to appear 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 > 
      <div >
        <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 >another box</div>
      <div >another box</div>
      <div >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>

CodePudding user response：

You can solve it by just setting the width of the column to 100% instead of 1fr.

By using 1fr, the fraction size will take the biggest element's width, in your case, the carousel's width, that's why it overflows.

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 >
    <!--  carousel section -->
    <div >
      <div >
        <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 >another box</div>
      <div >another box</div>
      <div >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>

CodePudding user response：

I added CSS grid to your <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 >
      <!-- 1 box -->
      <div >
        <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 >another box</div>
      <!-- 3 box -->
      <div >another box</div>
      <!-- 4 box -->
      <div >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>

CodePudding user response：

change your grid into flex to prevent overflowing

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