'Why are the items overflowing the fixed parent while the width is auto (flex)?

So, I have a container with display-style flex (nowrap) inside a fixed container. Every child has an auto-width setting as well as the parent and the wrapper. Somehow the content container shows the last part of the container as "extra space" while there is still content. When I set overflow:hidden on the content container it just cuts off the last part.

I found out that setting the parent to relative fixes the problem as well as setting a fixed width to the children. However, this will not work in the setting where I need it. Does anyone have an idea why this is happening?

JSfiddle here!

enter image description here

.body {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: hidden;
  align-items: center;
  justify-content: flex-start;
  flex: auto;
  width: auto;
  max-width: unset;
  position: relative;
}

.content {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 300px;
  width: auto;
  flex: 0 0 auto;
  max-width: unset;
  transform: translateX(-175px);
}

.content-item {
  background: orange;
  height: 300px;
  margin: 0px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  flex: 0 0 auto;
  width: auto;
  max-width: unset;
}
<div class="body">
  <div class="content">
    <div class="content-item">
      Lorem ipsum dolor sit amet.
    </div>
    <div class="content-item">
      Lorem ipsum dolor sit amet.
    </div>
    <div class="content-item">
      Lorem ipsum dolor sit amet.
    </div>
    <div class="content-item">
      Lorem ipsum dolor sit amet.
    </div>
    <div class="content-item">
      Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>

When for example I set the childs to width 200px instead of auto: enter image description here

When for example I set the position of the content container to relative instead of fixed: enter image description here

Both solutions wont work for me, since I need to be able to translate to the end of the content container, but instead it does not calculate the purple area from the first screenshot. So my question is, why is a part of the inside overflowing the container?

htmlcssflexboxoverflow


Solution 1:[1]

Do you mean something like this?

enter image description here

.body {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: hidden;
  align-items: center;
  justify-content: flex-start;
  flex: auto;
  width: 100%;
  position: relative;
}

.content {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 20px;
  position: fixed;
  top: 0px;
  left: 0px;
  height: 300px;
  width: 100%;
  /*transform: translateX(-100%);*/
}

.content-item {
  background: orange;
  height: 300px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  flex: 0 0 auto;
  width: max-content;
}
<div class="body">
  <div class="content">
    <div class="content-item">
      Lorem ipsum dolor sit amet.
    </div>
    <div class="content-item">
      Lorem ipsum dolor sit amet.
    </div>
    <div class="content-item">
      Lorem ipsum dolor sit amet.
    </div>
    <div class="content-item">
      Lorem ipsum dolor sit amet.
    </div>
    <div class="content-item">
      Lorem ipsum dolor sit amet.
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions