浏览器可以像仅使用 flex box 或 css 制作的标签吗？答案

【问题标题】：Could browser like tabs made with flex box or css only?浏览器可以像仅使用 flex box 或 css 制作的标签吗？
【发布时间】：2018-06-13 15:59:33
【问题描述】：

当主容器的宽度不适合所有项目时，需要缩小标签。

这是预期的行为： http://adamschwartz.co/chrome-tabs/

但是可以在纯css上完成吗，flexbox可以吗？

【问题讨论】：

标签： css flexbox width

【解决方案1】：

解决方案非常简单。仅display: flex; 用于容器，overflow: hidden; 用于选项卡项。不知道为什么我的问题被否决了。 :(

html {
  font-family: sans-serif;
}

.container {
  display: flex;
  border: 1px solid silver;
  padding: 10px 10px 0;
  width: 400px;
  margin: 0 auto 10px;
}

.tab {
  overflow: hidden;
  text-overflow: ellipsis;
  height: 20px;
  border: 1px solid silver;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
  padding: 10px;
  margin-right: 8px;
  border-bottom: none;
}

.tab:last-child {
  margin-right: 0;
}

<div class="container">
  <div class="tab">Google</div>
  <div class="tab">Apple</div>
  <div class="tab">Facebook</div>
</div>

<div class="container">
  <div class="tab">Google</div>
  <div class="tab">Apple</div>
  <div class="tab">Facebook</div>
  <div class="tab">Chrome</div>
  <div class="tab">Flexbox</div>
</div>

<div class="container">
  <div class="tab">Google</div>
  <div class="tab">Apple</div>
  <div class="tab">Facebook</div>
  <div class="tab">Chrome</div>
  <div class="tab">Flexbox</div>
  <div class="tab">Stackoverflow</div>
</div>

【讨论】：