Why overflow-x makes the block's width changing when using Flexbox?

Question

Consider the following snippet:

.page-wrapper {
  border: 2px solid blue;
  padding: 5px;
  width: 700px;
  /* I'm using flexbox here */
  display: flex;
  justify-content: center;
}
.container {
  border: 5px solid red;
  padding: 10px;
  /* 
    Changing overflow-x, the box width will change:
    hidden --> width is 700px 
    visible --> width is 3000px 
  */
  overflow-x: hidden;
}
.content {
  background-color: orange;
  width: 3000px;
  height: 100px;
}

<div class="page-wrapper">
  <div class="container">
    <div class="content">
    </div>
  </div>
</div>

With overflow-x: hidden:

With overflow-x: visible:

Why changing the overflow-x property on the container element, the container box's width changes?

adding `min-width:0` to the flex item will remove this behavior — Temani Afif, Aug 10 '18 at 08:42
I think it's because without the overflow, flex will always make the content fit within the area, if you tell it it is allowed to overflow, then the child will take the width it's given. [Have a read of this](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) - it's the part about the concept of available space — Pete, Aug 10 '18 at 09:05

score -2 · Answer 1 · answered Aug 10 '18 at 08:39

By definition overflow-x property visible is The content is not clipped, and it may be rendered outside the left and right edges. This is default. I think you should try using scroll

.page-wrapper {
  border: 2px solid blue;
  padding: 5px;
  width: 700px;
  /* I'm using flexbox here */
  display: flex;
  justify-content: center;
}
.container {
  display: block;
  border: 5px solid red;
  padding: 10px;
  /* 
    Changing overflow-x, the box width will change:
    hidden --> width is 700px 
    visible --> width is 3000px 
  */
  overflow-x: scroll;
}
.content {
  background-color: orange;
  width: 3000px;
  height: 100px;
}

<div class="page-wrapper">
  <div class="container">
    <div class="content">
    </div>
  </div>
</div>

Hi Sangsom, thanks for your answer. Anyway, if I use `display: block` on the `page-wrapper` the container's width won't change. My question is why the width changes if I use `display: flex`. — Andrea, Aug 10 '18 at 08:43

Why overflow-x makes the block's width changing when using Flexbox?

1 Answers1