html - 在包装之前使 flexbox 缩小尺寸

Question

我正在尝试制作具有以下行为的响应式页面:

我需要两个 <a>标签，一个接一个。这些标签在 <i> 中有一个图标标签和一个 <span>带有一些文本的标签。

随着视口(viewport)宽度的减小，我希望图标保持相同的大小，但我希望文本在推送第二个之前尽可能多地换行 <a>到下一行。这张图片按顺序显示了我想要发生的事情:

This CodePen和我一样接近。我想要的功能在那里，但我必须设置 flex-basis: 100px和 flex-grow: 1在.outer-item使其工作，这具有使两个元素具有相同宽度并将它们散布在可用空间中的不良影响。

.outer-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.outer-item {
  flex: 1 0 100px;
}

.inner-container {
  display: flex;
  flex: 0 1 auto;
  padding-top: 5px;
}

.inner-img {
  flex: 0 0 40px;
  height: 40px;
  line-height: 40px;
  background-color: red;
}

.inner-label {
  flex: 0 1 auto;
}

<div class="outer-wrapper">
  <a class="outer-item">
    <div class="inner-container">
      <i class="inner-img">img</i>
      <span class="inner-label">label label label label</span>
    </div>
  </a>
  <a class="outer-item">
    <div class="inner-container">
      <i class="inner-img">img</i>
      <span class="inner-label">label label label label label label label </span>
    </div>
  </a>
</div>

有没有办法让它工作？ flexbox 是可行的方法还是我应该使用其他东西？

Answer 1

The functionality I want is there, but I had to set flex-basis: 100px and flex-grow: 1 in .outer-item to make it work, which has the undesirable effect of making both items the same width and spreading them in the available space.

您将 outer-wrapper 设置为 display: flex，它就像一个 block 级容器(即，它将占据该行的所有可用空间)。

相反，使用display: inline-flex，它只会消耗足够的宽度来容纳内容。

revised codepen