浏览器可以像使用 flex box 或 css 制作的标签一样吗？

Question

需要缩小标签，而主容器不能按宽度容纳所有项目。

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

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

Answer 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">Whosebug</div>
</div>

浏览器可以像使用 flex box 或 css 制作的标签一样吗？

Could browser like tabs made with flex box or css only?

css

width

flexbox