Вкладка режущий элемент интерфейса переполнения под максимальной ширины

Question

Я не могу понять, почему этот пользовательский интерфейс с вкладками обрезает названия моего макета, находясь под максимальной шириной.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/

Я хочу иметь возможность отображать заголовки до 250 пикселей для каждой вкладки и максимумдлина строки для всех вкладок, при этом их только в том случае, если в родительском контейнере недостаточно места или заголовков, требующих более 250 пикселей.

Спасибо.

Answer 1

Проблема здесь: flex: 0 0 20px;

Изменение этого правила с помощью: flex: 1 1 auto; и добавление min-width (т.е. 20px) все работает хорошо.

Это ваш новый sassfile:

* {
   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>