Flexbox子元素比屏幕大

Question

我正在尝试使flexbox元素由于内容过多而不会变得比屏幕更大。

以下是一些基本代码：

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>

我已经做了一个jsfiddle来解释它：https://jsfiddle.net/51jxxe4p/2/ 左列有一个固定的宽度，右列应该使用剩余的空间（正确的行为）。但是，如果表太大，它将会超出屏幕，我试图防止这种情况。我认为#overflower可以防止它，但它不起作用。我尝试在各个地方设置宽度为100％，但也没有成功。

- abd

---

将 min-width: 0 添加到 section。 - Michael Benjamin

可能是重复问题：https://dev59.com/mVoV5IYBdhLWcg3wc-Ym - Michael Benjamin

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项中隐含的最小尺寸，详见为什么flex项无法缩小到内容大小以下？

- Oriol

Answer 2

假设你要寻找的是 #overflower 元素的 overflow-x 属性（因为这是你应用的属性），那是因为你输入的单词只有在单词内部有空格时才会换行。你可以使用 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>

- Michael Coker