CSS Scroll Bar Not Showing

Question

I've always had difficulty getting layout to work with CSS. I'm sure there's something I'm missing. Basically, I have a web page that consists of two columns side-by-side. The column on the right contains a square with a fixed width of 200px. The column on the left should be expandable. The content of the page, consisting of both columns together, should have a max-width of 400px. When the width of the screen is between 200px and 400px, the left column should shrink, but the right column should always be 200px.

The problem is that there's some text in the left column consisting of a long word with no spaces. This word happens to be a URL, but it could probably be anything, so long as it doesn't have any spaces. It seems to prevent the left column from shrinking. I tried adding a horizontal scrollbar for the region in the left column that contains the long word, but the scrollbar won't show up.

The two columns are flexbox items. I'd prefer to keep them that way, or have them be grid items. The only reason I'm using flexbox instead of grid is because I'm more familiar with flexbox. I just didn't want to use floats for layout, since I thought that might get messy in the long run.

Could someone explain to me why the scrollbar does not show up when the width of the screen shrinks to between 200px and 400px? If I could get the scrollbar to show up when the width of the screen shrinks, it would fix all of the layout difficulties:)

Here's the code:

.wrapper {
  width: 100%;
}

.center-wrapper {
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
}

.left-col {
  flex: 1 1 0;
}

.right-col {
  flex-shrink: 0;
}

.rectangle {
  width: 200px;
  height: 200px;
  background: grey;
}

.urls {
  overflow-x: auto;
}

.long-url {
  //display: none;
}

<div class="wrapper">
  <div class="center-wrapper">
    <div class="left-col">
      <h1>Some title</h1>
      <div>Some details</div>
      <div class="main-content">
      This is just some text.  Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.
      
        <div class="urls">
          <ol class="list">
            <li>
              <span class="long-url">http://example.com/some/really/long/url#withasuperlonghashtag</span>
            </li>
          </ol>
        </div>
      </div>
    </div>
    <div class="right-col">
      <div class="rectangle"></div>
    </div>
  </div>
</div>

Here's another instance of the same problem, but without the long unbroken word:

.wrapper {
  width: 100%;
}

.center-wrapper {
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
}

.left-col {
  flex: 1 1 0;
}

.right-col {
  flex-shrink: 0;
}

.rectangle {
  width: 200px;
  height: 200px;
  background: grey;
}

.other-rectangle {
  width: 200px;
  height: 200px;
  background: lightgreen;
}

.urls {
  overflow-x: auto;
}

.long-url {
  display: none;
}

<div class="wrapper">
  <div class="center-wrapper">
    <div class="left-col">
      <h1>Some title</h1>
      <div>Some details</div>
      <div class="main-content">
        This is just some text. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.

        <div class="urls">
          <div class="other-rectangle"></div>
          <ol class="list">
            <li>
              <span class="long-url">http://example.com/some/really/long/url#withasuperlonghashtag</span>
            </li>
          </ol>
        </div>
      </div>
    </div>
    <div class="right-col">
      <div class="rectangle"></div>
    </div>
  </div>
</div>

Answer 1

Try set word-break to break-all.

.left-col {
  word-break: break-all;
}

With the default value normal, line breaks in the text can only occur in certain spaces, like when there is a space or a hyphen. But when it comes to a long copy and pasted URL, if that URL has no hyphens, it can extend beyond the parent box and look bad or worse. A scrollbar won't be there because the browser doesn't know where to put the line break.

Answer 2

The issue seems to be happening because of the default min-width: auto property setting on the .left-col flexbox item. This prevents the .left-col item from being smaller than its content. When I use:

.left-col {
  flex: 1 1 0;
  min-width: 0;
}

for .left-col, the scrollbar appears. I found out due Michael Benjamin's answer to another stackoverflow question here.

Answer 3

In case scrollbar is not shown up:

Add the code below to your css file: You can also customize the way you like

                ::-webkit-scrollbar {
                    width: .5rem;
                    height: 5px;
                }

                /* Track */
                ::-webkit-scrollbar-track {
                    box-shadow: inset 0 0 1px white;
                    border-radius: 10px;
                }

                /* Handle */
                ::-webkit-scrollbar-thumb {
                    background: grey;
                    border-radius: 10px;
                }