CSS滚动条不显示

Question

我总是很难让布局与CSS一起工作。我肯定我错过了什么。基本上，我有一个由并排的两列组成的网页。右边的列包含一个固定宽度为200px的正方形。左边的列应该是可扩展的。由两列组成的页面内容的最大宽度应为400px。当屏幕宽度在200px和400px之间时，左边的列应该缩小，但右边的列应该总是200px。

问题是左列中有一些文本由一个没有空格的长单词组成。这个词恰好是一个URL，但它可能是任何东西，只要它没有任何空格。它似乎可以防止左列收缩。我尝试在包含长单词的左列区域添加一个水平滚动条，但滚动条不会显示。

这两列是flexbox项。我更喜欢这样保存它们，或者让它们成为grid项目。我使用flexbox而不是grid的唯一原因是因为我更熟悉flexbox。我只是不想在布局中使用浮动，因为我认为从长远来看这可能会变得混乱。

有人能给我解释一下，当屏幕宽度缩小到200px和400px之间时，为什么滚动条不显示？如果我能让滚动条在屏幕宽度缩小时显示出来，它将解决所有的布局难题：）

代码如下：

.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>

这是同样问题的另一个例子，但是没有长而完整的单词：

.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

该问题似乎是由于默认的min-ware： auto属性设置在. leet-colflexbox项上而发生的。这可以防止. leet-cols项小于其内容。当我使用：

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

对于。左栏，滚动条出现。我在这里找到了Michael Benjamin对另一个问题的答案。

Answer 2

尝试将wordbreak设置为break all。

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

使用默认值normal，文本中的换行符只能出现在某些空格中，如有空格或连字符时。但是，当涉及到一个长拷贝和粘贴的URL时，如果该URL没有连字符，它可能会扩展到父框之外，看起来很糟糕或更糟。滚动条不会出现，因为浏览器不知道将换行符放在哪里。