Question

我正在设计一个链接块。想法是允许链接换行到新行上，但在较小的屏幕上，为避免出现10行，可见区域变得更宽且可滚动。

该代码段的.inner-box设置为1200px。设置为600px时，您可以看到元素按需要环绕。

但是，目前的代码存在一个问题。

当设置为1200px（当前）时，内部元素（芯片）没有到达末端，所以我在右边留有空白。

我需要的是收缩.inner-box，如果内部元素没有填充框。我尝试将宽度：1200px更改为最大宽度：1200px，但这不起作用。

.outer-box将始终保持相同的宽度。

任何帮助表示赞赏。

* {
  box-sizing: border-box;
}

.container {
  margin: 50px;
}

.outer-box {
  background-color: red;
  overflow-x: auto;
  width: 500px;
}

.inner-box {
  background-color: lime;
  display: flex;
  flex-wrap: wrap;
  margin-top: -8px;
  margin-left: -8px;
  width: 1200px;
}

.chip {
  background-color: aqua;
  border-radius: 16px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 32px;
  margin-top: 8px;
  margin-left: 8px;
  padding: 0 12px;
}

<div class="container">
  <div class="outer-box">
    <div class="inner-box">
      <a class="chip">chip</a>
      <a class="chip">long chip</a>
      <a class="chip">chip</a>
      <a class="chip">longer chip</a>
      <a class="chip">chip</a>
      <a class="chip">longest chip</a>
      <a class="chip">long chip</a>
      <a class="chip">chip</a>
      <a class="chip">longer chip</a>
      <a class="chip">chip</a>
      <a class="chip">longer chip</a>
    </div>
  </div>
</div>

Answer 1

Working Example

使用inline-flex可使内容在需要时变小。通过对其他容器设置限制，我们可以获得所需的滚动结果，并且在需要时也可以进行包装。

Css

.container{
  background: red;
  width: 600px;
  overflow-x: auto;
  display: inline-flex;
}

.outer{
    overflow-x: auto;
  background: purple;
  display: inline-flex;
  flex-wrap: wrap;
  flex: 1 0 auto;
  max-width: 1200px;
}

.inner{
  background: yellow;
  width: 100px;
}

Answer 2

请提供此样式，以免显示不必要的空间。

.outer-box ,.inner-box {
    width: auto;
 }

以特定长度包裹的Flexbox

2 个答案: