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％，但也没有成功。

Answer 1

不要在其中添加任何overflower元素，将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>

原因是弹性项目隐含的最小尺寸，如Why doesn't flex item shrink past content size?

中所述

Answer 2

假设它是你要追踪的overflow-x属性（因为这是你应用于#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>

Flexbox孩子大于屏幕

2 个答案: