Flexbox and overflow: hidden not working properly

Question

I have a bit of HTML:

.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%;
      outline: 5px solid black;
    }
      .example .wide {
        width: 400px;
      }

.red    { background-color: red; }
.orange { background-color: orange; }
.yellow { background-color: yellow; }
.green  { background-color: green; }
.blue   { background-color: blue; }
.indigo { background-color: indigo; }

<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>

Now, the problem here is, if I have a div inside an element that is a flexbox and that div has overflow: hidden; (i.e. .example, with the thick black outline) them 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?

Simply add `min-height: 0;` to the flex child that [has our overflow container](https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/). — Time Killer, Mar 30 '22 at 10:35

Huba Nagy · Accepted Answer · 2015-12-08T14:06:09.347

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;
}

score 2 · Answer 2 · answered Nov 12 '19 at 20:26

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

answered Nov 12 '19 at 20:26

mohammad feiz

308
3
4

Flexbox and overflow: hidden not working properly

2 Answers2

Linked