最大宽度下的Tab UI溢出切割元素

Question

我无法确定为什么此选项卡UI在最大宽度下时会剪切我的模型标题。 max-width为250px，并且某些文档可能会溢出，这是可以的，但是我的问题是，标题栏“ a.html”也被剪切了，而制表符头的宽度仍在允许的最大值以下。

<div>
  <div class="navbar">
  <ul>
    <li>
      <a>
        <span class="doc_icon"><i class="fas fa-file"></i></span>
        <span class="doc_title">Document.html</span>
        <span class="actions">
          <span>
            &times;
          </span>
          <span>
            <i class="fas fa-circle"></i>
          </span>
        </span>
      </a>
    </li>
    <li>
      <a>
        <span class="doc_icon"><i class="fas fa-file"></i></span>
        <span class="doc_title">a.html</span>
        <span class="actions">
          <span>
            &times;
          </span>
          <span>
            <i class="fas fa-circle"></i>
          </span>
        </span>
      </a>
    </li>
    <li>
      <a>
        <span class="doc_icon"><i class="fas fa-file"></i></span>
        <span class="doc_title">Verylongnameforadocumentmaybethisisenough.html</span>
        <span class="actions">
          <span>
            &times;
          </span>
          <span>
            <i class="fas fa-circle"></i>
          </span>
        </span>
      </a>
    </li>
    <li>
      <a>
        <span class="doc_icon"><i class="fas fa-file"></i></span>
        <span class="doc_title">Thisisanothergynormousnameforanhtmldocument.html</span>
        <span class="actions">
          <span>
            &times;
          </span>
          <span>
            <i class="fas fa-circle"></i>
          </span>
        </span>
      </a>
    </li>
  </ul>
    <div class="actions">
      <span>
        <i class="fas fa-window-restore"></i>
      </span>
      <span>
        <i class="fas fa-ellipsis-h"></i>
      </span>
    </div>
  </div>
  <main>

  </main>
</div>

// SCSS

* {
   box-sizing: border-box;
 }
  div.navbar {
    display: flex;
    flex-flow: row nowrap;

    ul {
        display: flex;
        flex: auto;
        justify-content: flex-start;
        list-style-type: none;
        padding: 0;
        margin: 0px;

        li {
            max-width: 250px;
            padding: 5px;
            outline: 2px solid red;

            a {
              display: flex;
              overflow: hidden;

              > span {
                align-items: center;
                height: 20px;
                flex: 0 0 20px;
                text-overflow: ellipsis;

                &.doc_icon {
                  max-width: 20px;
                  margin-right: 5px;
                }

                &.doc_title {
                  flex: auto;
                  overflow: hidden;
                  margin-right: 5px;
                }

                &.actions {
                  position: relative;
                  width: 20px;
                  height: 20px;

                  span {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translateX(-50%) translateY(-50%);
                    font-size: 1em;
                  }
                }
              }
            }
        }
    }

    div.actions {
        flex: 0 0 auto;
    }
}
main {
    height: calc(100vh - 50px);
    background: grey;
}

这里是小提琴。

https://jsfiddle.net/6wsrjpeL/1/

我想要的是能够为每个选项卡完全显示最大250px的标题，并为所有选项卡显示最大行长，而仅在父容器没有足够的空间或标题需要超过250像素。

谢谢。

Answer 1

问题出在这里：flex: 0 0 20px;

使用以下规则更改规则：flex: 1 1 auto;并添加min-width（即20px），一切正常。

这是您的新sass文件：

* {
   box-sizing: border-box;
 }
  div.navbar {
    display: flex;
    flex-flow: row nowrap;

    ul {
        display: flex;
        flex: auto;
        justify-content: flex-start;
        list-style-type: none;
        padding: 0;
        margin: 0px;

        li {
            max-width: 250px;
            padding: 5px;
            outline: 2px solid red;

            a {
              display: flex;
              overflow: hidden;

              > span {
                align-items: center;
                height: 20px;
                /*flex: 0 0 20px;*/
                flex: 1 1 auto; /* add this */
                min-width:20px; /* add this */

                text-overflow: ellipsis;

                &.doc_icon {
                  max-width: 20px;
                  margin-right: 5px;
                }

                &.doc_title {
                  /*flex: auto;*/
                  overflow: hidden;
                  margin-right: 5px;
                }

                &.actions {
                  position: relative;
                  width: 20px;
                  height: 20px;

                  span {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translateX(-50%) translateY(-50%);
                    font-size: 1em;
                  }
                }
              }
            }
        }
    }

    div.actions {
        flex: 0 0 auto;
    }
}
main {
    height: calc(100vh - 50px);
    background: grey;
}

这是一个小提琴：https://jsfiddle.net/6wsrjpeL/2/

我在这里举了一个编译了scss的示例：

* {
  box-sizing: border-box;
}

div.navbar {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
}

div.navbar ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: auto;
      -ms-flex: auto;
          flex: auto;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  list-style-type: none;
  padding: 0;
  margin: 0px;
}

div.navbar ul li {
  max-width: 250px;
  padding: 5px;
  outline: 2px solid red;
}

div.navbar ul li a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}

div.navbar ul li a > span {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  height: 20px;
  flex:1 1 auto;
  min-width:20px;
  text-overflow: ellipsis;
}

div.navbar ul li a > span.doc_icon {
  max-width: 20px;
  margin-right: 5px;
}

div.navbar ul li a > span.doc_title {

  overflow: hidden;
  margin-right: 5px;
}

div.navbar ul li a > span.actions {
  position: relative;
  width: 20px;
  height: 20px;
}

div.navbar ul li a > span.actions span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  font-size: 1em;
}

div.navbar div.actions {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

main {
  height: calc(100vh - 50px);
  background: grey;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div>
    <div class="navbar">
        <ul>
            <li>
                <a>
                    <span class="doc_icon"><i class="fas fa-file"></i></span>
                    <span class="doc_title">Document.html</span>
                    <span class="actions">
              <span>
                &times;
              </span>
                    <span>
                <i class="fas fa-circle"></i>
              </span>
                    </span>
                </a>
            </li>
            <li>
                <a>
                    <span class="doc_icon"><i class="fas fa-file"></i></span>
                    <span class="doc_title">a.html</span>
                    <span class="actions">
              <span>
                &times;
              </span>
                    <span>
                <i class="fas fa-circle"></i>
              </span>
                    </span>
                </a>
            </li>
            <li>
                <a>
                    <span class="doc_icon"><i class="fas fa-file"></i></span>
                    <span class="doc_title">Verylongnameforadocumentmaybethisisenough.html</span>
                    <span class="actions">
              <span>
                &times;
              </span>
                    <span>
                <i class="fas fa-circle"></i>
              </span>
                    </span>
                </a>
            </li>
            <li>
                <a>
                    <span class="doc_icon"><i class="fas fa-file"></i></span>
                    <span class="doc_title">Thisisanothergynormousnameforanhtmldocument.html</span>
                    <span class="actions">
              <span>
                &times;
              </span>
                    <span>
                <i class="fas fa-circle"></i>
              </span>
                    </span>
                </a>
            </li>
        </ul>
        <div class="actions">
            <span>
            <i class="fas fa-window-restore"></i>
          </span>
            <span>
            <i class="fas fa-ellipsis-h"></i>
          </span>
        </div>
    </div>
    <main>

    </main>
</div>