图片:
我有一个父元素，它有800px的max-width，但没有min-width，使用
flex: 1;
现在，我希望这个元素有一个子表，当父元素缩小时，我希望它溢出。也就是说，我希望该表的max-width是父元素的当前width。
情况可以概括如下:
<main style="max-width: 800px; flex: 1;">
<article style="width: 100%; max-width: 100%;">
<!-- some more elements wrapping the table, also being set to 100% width & max-width -->
<table style="overflow-x: scroll; width: 100%; max-width: 100%;"></table>
</article>
</main>
这行不通。而不是停止在main组件的当前宽度，表格扩展到800px，然后才溢出。
我该如何解决这个问题?
下面是一些演示问题的最小工作代码:
body {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
background: red;
}
main {
flex: 1;
width: 100%;
max-width: 800px;
background: white;
}
article {
width: 100%;
max-width: 100%;
}
div {
width: 100%;
max-width: 100%;
overflow-x: scroll;
}
table,
tbody {
max-width: 100%;
background: green;
width: 100%;
}
td {
white-space: nowrap;
}<html>
<body>
<h1>
What I need is for the main component to be able to shrink below its max width when the window shrinks, and for its children to overflow when it does. What happens now is that overflowing children force the main element to be at max height.
</h1>
<main>
<article>
<div>
<table>
<tbody>
<tr>
<td>
This text is here demonstrates that it's not overflowing as it should but instead filling the parent to its max width (800px)
</td>
<td>
This text is here demonstrates that it's not overflowing as it should but instead filling the parent to its max width (800px)
</td>
<td>
This text is here demonstrates that it's not overflowing as it should but instead filling the parent to its max width (800px)
</td>
<td>
This text is here demonstrates that it's not overflowing as it should but instead filling the parent to its max width (800px)
</td>
<td>
This text is here demonstrates that it's not overflowing as it should but instead filling the parent to its max width (800px)
</td>
<td>
This text is here demonstrates that it's not overflowing as it should but instead filling the parent to its max width (800px)
</td>
<td>
This text is here demonstrates that it's not overflowing as it should but instead filling the parent to its max width (800px)
</td>
</tr>
</tbody>
</table>
</div>
</article>
</main>
</body>
</html>在玩了一些CSS属性之后，我的问题的解决方案是将display: flex和min-width: 0px添加到<main>元素的父元素中。