css Question posted in
Some basic documentation can be found here.

Css – Why does an overflowing flex child with overflow-x: scroll push siblings outside the flex container?

https://jsfiddle.net/3da02kxz/

Top example is the troublesome layout, bottom example is the expected layout.

Why does the .main element (green) push the .side element (blue) outside of .wrap (orange)? I tried width/max-width/flex-basis/flex-grow on various elements but nothing really seems to stop it from doing that while allowing .main to take up the available space. Setting max-width on .main to a specific value like 400px helps, but obviously that’s not responsive.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It appears that a similar question was already answered and it solves my problem as well: Prevent flex items from overflowing a container

    Simply adding min-width: 0; to .main fixed it.


  2. 0

    Solution!
    Just Give proper width to .main and .side elements and place some div correctly follow the solution code given below 👇 Have any doubts feel free to ask!

    * {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

.wrap {
  max-width: 700px;
  margin: 20px auto;
  border: 2px solid red;
  display: flex;
  gap: 4px;
  border: 2px solid orange;
  align-items: flex-start;
}

.main {
  width: 50%; /* Adjust the value based on your design */
  border: 2px solid green;
}

.side {
  width: 50%; /* Adjust the value based on your design */
  flex-shrink: 0;
  border: 2px solid blue;
}

.wrap,
.main,
.side,
.item {
  padding: 4px;
}

.scrolls {
  max-width: 50vw;
  overflow-x: scroll;
  display: flex;
  gap: 10px;
}

.item {
  flex-shrink: 0;
  width: 200px;
  border: 2px solid red;
}
    <div class="wrap">
  <div class="main">
    <div class="scrolls">
      <div class="item">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, fuga.
      </div>
      <div class="item">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, fuga.
      </div>
      <div class="item">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, fuga.
      </div>
      <div class="item">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, fuga.
      </div>
      <div class="item">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, fuga.
      </div>
      <div class="item">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, fuga.
      </div>
      <div class="item">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, fuga.
      </div>
      <div class="item">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, fuga.
      </div>
      <div class="item">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, fuga.
      </div>
      <div class="item">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, fuga.
      </div>
      <div class="item">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, fuga.
      </div>
      <div class="item">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, fuga.
      </div>
    </div>
  </div>
  <div class="side">
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis magnam unde ipsa earum natus commodi maiores adipisci molestias harum obcaecati.
    </p>
  </div>
</div>

<div class="wrap">
  <div class="main">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor consectetur similique, blanditiis minus minima, in aspernatur, ex corrupti ratione quasi saepe sint impedit animi dignissimos enim? Corporis ea quis ad quo blanditiis debitis, rem nostrum
      voluptas, sunt provident quasi ratione officiis perferendis laborum nobis illum hic soluta nam asperiores ab.
    </p>
  </div>
  <div class="side">
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perspiciatis magnam unde ipsa earum natus commodi maiores adipisci molestias harum obcaecati.
    </p>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search