CODEWITHSUNDEEP
htmlcssflexbox
abd
abd

Reputation: 389

Flexbox child larger than screen

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.

Upvotes: 4

Views: 7601

Answers (2)

Michael Coker
Michael Coker

Reputation: 53664

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>

Upvotes: 0

Oriol
Oriol

Reputation: 287970

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?

Upvotes: 3

Related Questions