白色空间nowrap失去元素宽度

Question

我正在尝试使用可调整大小的框创建网格。如果需要，最好有x轴的滚动条。问题是如果我有一个嵌套列表：

<ul>
    <li>blubb 1</li>
    <li>blubb 2
        <ul>
            <li>blubb 1</li>
            <li>blubb 2</li>
        </ul>
    </li>
</ul>

并且周围的元素具有较小的宽度列表类型的折叠。

我想知道的是：

• 为什么？
• 有没有办法阻止这种情况发生？
• 有没有办法在列表（或所有其他html元素）周围获得padding-right所以没有内容贴在绿色边框的右侧？

显然，如果周围的<div>有足够大的width，它会按预期工作。因此，红色边框围绕所有内容，这就是我想要的。 但取决于内容而不是包装器。因为包装器可以调整大小（在现实生活中），并且可以一直改变它的宽度。

.no-wrap *:not(p) {
     white-space: nowrap;
}

.flex-box {
  display: flex;
  width: 100%;
  margin: 0;
  height: 300px;
}

.flex-box .col {
  padding: 12px;
  border: 1px solid green;
  flex: 0.2;
  overflow-y: auto;
  margin: 10px;
}

.flex-box .col:nth-child(2) {
  flex: 0.7;
}

.col ul {
    border:solid 1px orange;
    display: block;
    min-width: 100px;
}

.col > ul {
    border:solid 1px red;
}

<div class="flex-box">
    <div class="col no-wrap">
      <h4>Why is red<br>border not<br>surrounding<br>all ul li(s)</h4>
      <ul>
          <li>Pellentesque habitant</li>
          <li>Pellentesque habitant
              <ul>
                  <li>Pellentesque habitant</li>
                  <li>Pellentesque habitant</li>
                  <li>Pellentesque habitant</li>
                  <li>Pellentesque habitant</li>
                  <li>Pellentesque habitant</li>
                  <li>Pellentesque habitant</li>
                  <li>Pellentesque habitant
                      <ul>
                          <li>Pellentesque habitant</li>
                          <li>Pellentesque habitant</li>
                          <li>Pellentesque habitant</li>
                          <li>Pellentesque habitant</li>
                          <li>Pellentesque habitant</li>
                          <li>Pellentesque habitant</li>
                          <li>Pellentesque habitant
                              <ul>
                                  <li>Pellentesque habitant</li>
                                  <li>Pellentesque habitant</li>
                                  <li>Pellentesque habitant</li>
                                  <li>Pellentesque habitant</li>
                                  <li>Pellentesque habitant</li>
                                  <li>Pellentesque habitant</li>
                                  <li>Pellentesque habitant</li>
                              </ul>
                          </li>
                      </ul>
                  </li>
              </ul>
          </li>
          <li>Pellentesque habitant</li>
          <li>Pellentesque habitant</li>
          <li>Pellentesque habitant</li>
          <li>Pellentesque habitant</li>
          <li>Pellentesque habitant</li>
        </ul>
    </div>
    
    
    <div class="col no-wrap">
      <h4>Just like here</h4>
      <ul>
          <li>Pellentesque habitant</li>
          <li>Pellentesque habitant
              <ul>
                  <li>Pellentesque habitant</li>
                  <li>Pellentesque habitant</li>
                  <li>Pellentesque habitant</li>
                  <li>Pellentesque habitant</li>
                  <li>Pellentesque habitant</li>
                  <li>Pellentesque habitant</li>
                  <li>Pellentesque habitant
                      <ul>
                          <li>Pellentesque habitant</li>
                          <li>Pellentesque habitant</li>
                          <li>Pellentesque habitant</li>
                          <li>Pellentesque habitant</li>
                          <li>Pellentesque habitant</li>
                          <li>Pellentesque habitant</li>
                          <li>Pellentesque habitant
                              <ul>
                                  <li>Pellentesque habitant</li>
                                  <li>Pellentesque habitant</li>
                                  <li>Pellentesque habitant</li>
                                  <li>Pellentesque habitant</li>
                                  <li>Pellentesque habitant</li>
                                  <li>Pellentesque habitant</li>
                                  <li>Pellentesque habitant</li>
                              </ul>
                          </li>
                      </ul>
                  </li>
              </ul>
          </li>
          <li>Pellentesque habitant</li>
          <li>Pellentesque habitant</li>
          <li>Pellentesque habitant</li>
          <li>Pellentesque habitant</li>
          <li>Pellentesque habitant</li>
        </ul>
    </div>
</div>

For JsFiddle click here

Answer 1

你可以添加overflow：auto到你的ul，这样你列出的所有内容都不会溢出到它们的父级，但是会添加一个滚动条。

.col ul{
   overflow: auto;
}