Overflow block inside flex column without min-width breaks max-width of parent wrapper-CodePudding

I need to place block with overflowed content inside flex column (flex-grow:1) and not to break parent wrapper max-width.

Im unable to change flex styles (so I cant set flex column min-width:0), Im able to edit only the content inside flex column.

Any thoughts?

.wrapper {
    max-width: 800px;
    background-color: grey;
}
.flex {
    display: flex;
}
.column1 {
    width: 200px;
    height: 100px;
    flex-shrink: 0;
    background-color: green; 
}
.column2 {
    flex-grow: 1;
    background-color: red; 
    /* min-width: 0; */ 
}
.overflow {
    max-width: 100%;
    overflow: auto; 
}
.wideContent {
    height: 100px;
    width: 2500px;
}

<div >
  <div >
    <div ></div>
    <div >
      <div >
        <div ></div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

Use min-width: 100%;width: 0; on the overflow element:

.wrapper {
  max-width: 800px;
  background-color: grey;
}

.flex {
  display: flex;
}

.column1 {
  width: 200px;
  height: 100px;
  flex-shrink: 0;
  background-color: green;
}

.column2 {
  flex-grow: 1;
  background-color: red;
}

.overflow {
  min-width: 100%;
  overflow: auto;
  width: 0;
}

.wideContent {
  height: 100px;
  width: 2500px;
}

<div >
  <div >
    <div ></div>
    <div >
      <div >
        <div ></div>
      </div>
    </div>
  </div>
</div>