flex列中没有最小宽度的溢出块会破坏父包装的最大宽度

Question

我需要将包含溢出内容的块放置在flex列中(flex growt:1(，并且不要破坏父包装器的最大宽度。

我无法更改flex样式(因此我无法设置flex列的最小宽度：0(，我只能编辑flex列内的内容。

有什么想法吗？

.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 class="wrapper">
<div class="flex">
<div class="column1"></div>
<div class="column2">
<div class="overflow">
<div class="wideContent"></div>
</div>
</div>
</div>
</div>

Answer 1

在溢出元素上使用min-width: 100%;width: 0;：

.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 class="wrapper">
<div class="flex">
<div class="column1"></div>
<div class="column2">
<div class="overflow">
<div class="wideContent"></div>
</div>
</div>
</div>
</div>