Creating a scrollable div inside of 2nd column of flexbox implementation

Question

I have the following code consisting of:

a left area that I am using flex-shrink: 0 on so that the text does not get broken.
a right area which should take up the remaining screen space
a scrollable div containing a table which should be contained in the right space

The problem is that the scrollable div is not being contained in the right-side space.

What am I doing wrong?

How can I make sure that the div actually scrolls and does not grow beyond the width of the screen? It is easy enough to do with a fixed-width component, but how do I do it with a variable width screen?

html, body {
  width: 100%;
}
.outer {
  display: flex;
  width: 100%;
}
.left {
  flex-shrink: 0;
  margin-right: 15px;
  background-color: #ddd;
}
.right {
  flex: 1
}

.scrollable_box {
  width: 100%;
  overflow-X: scroll;
  border: solid black 1px;
}

.title {
  text-align: center;
  font-weight: bold;
}

<html>
<body>
<div class="outer">
  <div class="left">
    <div>Some Item Here</div>
    <div>Some Other Item Here</div>
    <div>Another Item</div>
  </div>
  <div class="right">
    <div class="title">Welcome to the Home of the scrollable Box</div>
    <p>This box you see below should not extend beyond the screen</p>
    <p>Notice how the title also appears far to the right because of this issue</p>
    <div class="scrollable_box">
        <table>
          <tbody>
              <tr>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
              </tr>
          </tbody>
        </table>
    </div>
  </div>
</div>
</body>
</html>

score 1 · Accepted Answer · answered Aug 24 '19 at 23:17

After a couple of hours of trying to figure this out, it looks like all I had to do was to add min-width: 0; to the right-side flexbox.

I'm not sure if this a 'hacky' way of accomplishing this, or if there is a proper way that I should be doing it. I would appreciate any feedback in this regard.

See here for more info.

html, body {
  width: 100%;
}
.outer {
  display: flex;
  width: 100%;
}
.left {
  flex-shrink: 0;
  margin-right: 15px;
  background-color: #ddd;
}
.right {
  flex: 1;
  min-width: 0;
}

.scrollable_box {
  width: 100%;
  overflow-X: scroll;
  border: solid black 1px;
  padding-bottom: 15px;
}

.title {
  text-align: center;
  font-weight: bold;
}

<html>
<body>
<div class="outer">
  <div class="left">
    <div>Some Item Here</div>
    <div>Some Other Item Here</div>
    <div>Another Item</div>
  </div>
  <div class="right">
    <div class="title">Welcome to the Home of the scrollable Box</div>
    <p>This box you see below should not extend beyond the screen</p>
    <p>Notice how the title also appears far to the right because of this issue</p>
    <div class="scrollable_box">
        <table>
          <tbody>
              <tr>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
                <td>Sample</td>
              </tr>
          </tbody>
        </table>
    </div>
  </div>
</div>
</body>
</html>

Not a hacky solution. It's clean and valid. You needed to override the `min-width: auto` default setting on flex items. Full explanation in the duplicate. — Michael Benjamin, Aug 25 '19 at 00:46

Creating a scrollable div inside of 2nd column of flexbox implementation

1 Answers1