4

I am trying to have a flexbox element not become larger than the screen due to its content.

Here is some basic code:

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>

I have done a jsfiddle to explain it as well: https://jsfiddle.net/51jxxe4p/2/

The left column has a fixed width and the right one should use the remaining space (proper behavior). But, if the table is too large, it will grow outside of the screen, which I try to prevent. I thought the #overflower would prevent it, but it doesn't work. I tried to set width at 100% in various places, but without success either.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
abd
  • 379
  • 3
  • 14

2 Answers2

3

Don't add any overflower element in there, set overflow-x: auto directly to the flex item.

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>

The reason is the implied minimum sizes in flex items, as explained in Why doesn't flex item shrink past content size?

Community
  • 1
  • 1
Oriol
  • 274,082
  • 63
  • 437
  • 513
0

Assuming it's the overflow-x property you're going after (since that's what you applied to #overflower), it's because the words you're putting in won't break unless there is a space in the word. You can cause a word/string to break anywhere by using 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
  • 52,626
  • 5
  • 64
  • 64