html - 空白 nowrap 丢失元素宽度

Question

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

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

并且周围元素的宽度较小，列表会折叠。

我想知道的是:

• 为什么？
• 有办法阻止这种情况发生吗？
• 有没有办法得到padding-right围绕列表(或所有其他 html 元素)，以便没有内容粘在带有绿色边框的右侧？

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

.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

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

.col ul{
   overflow: auto;
}