Flexbox子屏幕大于屏幕

Question

由于其内容，我正在尝试使用一个不大于屏幕的柔性盒元素。

以下是一些基本代码：

​

section,
aside {
  font-size: 1.5em;
}
#container1,
#container2 {
  display: flex;
}
#overflower {
  overflow-x: auto;
}
aside {
  background-color: red;
  flex-basis: 15em;
  width: 15em;
  min-width: 15em;
  flex-grow: 0;
}
section {
  background-color: green;
  flex-grow: 1;
  flex-basis: 15em;
}

<div id="container1">
  <aside>Short text OK</aside>
  <section>Short text OK</section>
</div>
<br>
<div id="container2">
  <aside>Short text OK</aside>
  <section>
    <div id="overflower">
      <table>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
        <td>aaa</td>
      </table>
    </div>
  </section>
</div>

​

我也做了一个小提琴手来解释：https://jsfiddle.net/51jxxe4p/2/

左边的列有固定的宽度，右边的列应该使用剩余的空间(适当的行为)。但是，如果表太大，它会在屏幕外生长，这是我试图阻止的。我以为#overflower会阻止它，但它不起作用。我试着在不同的地方将宽度设置为100%，但也没有成功。

Answer 1

不要在其中添加任何超花元素，直接将overflow-x: auto设置为flex项。

​

section, aside {
  font-size: 1.5em;
}
#container1, #container2 {
  display: flex;
}
aside {
  background-color:red;
  flex-basis: 15em;
  width: 15em;
  min-width: 15em;
  flex-grow: 0;
}
section {
  background-color: green;
  flex-grow: 1;
  flex-basis: 15em;
  overflow-x: auto;
}

<div id="container1">
  <aside>Short text OK</aside>
  <section>Short text OK</section>
</div>
<br>
<div id="container2">
  <aside>Short text OK</aside>
  <section>
    <table>
      <tr>
        <td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td><td>aaa</td>
      </tr>
    </table>
  </section>
</div>

​

原因是flex项中隐含的最小大小，正如Why doesn't flex item shrink past content size?中所解释的那样

Answer 2

假设它是您要追求的overflow属性(因为这就是您应用于#overflower的内容)，这是因为除非单词中有一个空格，否则插入的单词是不会中断的。通过使用word-break: break-all;，可以使单词/字符串在任何地方中断

​

#container2 {
  display: flex;
  max-width: 100vw;
}

#overflower {
  word-break: break-all;
}

aside {
  flex-basis: 15em;
  width: 15em;
  min-width: 15em;
  flex-grow: 0;
}

section {
  flex-grow: 1;
}

<div id="container2">
    <aside>Short text OK</aside>
    <section>
        <div id="overflower">
            <table>
              <tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td></tr>
            </table>
        </div>
    </section>
</div>

​