Flexbox and overflow: hidden not working properly

Question

I have a bit of HTML:

<div class="flex">
  <div class="red">
    <div class="example">
      <div class="wide">
      </div>
    </div>    
  </div>
  <div class="orange"></div>
  <div class="yellow"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="indigo"></div>
</div>

<div class="flex">
  <div class="red"></div>
  <div class="orange"></div>
  <div class="yellow"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="indigo"></div>
</div>

And my CSS:

.flex {
  display: -webkit-box;
  display: flex;

  height: 100px;
  width: 100%;
}

.flex > div {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;

  -webkit-flex-grow: 1;
  -webkit-flex-shrink: 1;

  margin: 15px;
}

.example {
  overflow: hidden;
  width: 100%;
  border: 1px solid black;
}

.example .wide {
  width: 400px;
}

Now, the problem here is, if I have a div inside an element that is a flexbox and that div has overflow: hidden; I would expect the parent flexbox to just take up the default amount of space (i.e. the same as the other elements, but it doesn't.

It is like it ignores the overflow and just expands the div anyway.

I have made a CodePen so you can see the issue.

I would like all the coloured divs to be the same width.

Can anyone help?

Answer 1

Your problem is caused by setting the flex-basis of .flex > div to auto. This causes the div to expand to accommodate its content as it has no set dimension along the flex axis. Give it a set value like 20px and the space will be evenly divided because flex-grow is set to 1.

This article should help you get started with the flex layout.

Here is a modified version of your code

.flex {
  display: -webkit-box;
  display: flex;

  height: 100px;
  width: 100%;
}

.flex > div {
  flex-grow: 1;
  flex-shrink: 1;
  /* set value for the flex basis, the two properties above will evenly 
  divide the space. */
  flex-basis: 20px;

  -webkit-flex-grow: 1;
  -webkit-flex-shrink: 1;

  margin: 15px;
  overflow: hidden;
}

.example {
  overflow: hidden;
  border: 1px solid black;
}

.example .wide {
  width: 400px;
  height: 10px;
}

Answer 2

only set position of parent element

<style>
.parent{
    display:flex;
    overflow:hidden;
    position:relative;
}
.child{
    flex-grow:2
}
</style>

<div class="parent">
    <div class="child">

    </div>
</div>

this work for me