如何使弹性容器收缩到最小合理尺寸？

Question

我有一个按钮，它是带有两个项目的flexcontainer。

.flex-container {
    display: flex
    column-gap: 1rem
    align-items: center
    margin-right: 10rem /* just for illustration sake */
    cursor: pointer

    &:hover
        opacity: 0.6
}

尽管物品不会拉伸，但它会占用一行中的所有可用空间。问题是，当用户指向按钮的右侧时，它的反应就像鼠标位于按钮上一样。我希望 Flexbox 容器在第二项之后立即结束。怎么做到的？

margin-right: auto

不起作用

Answer 1

您可以在 Flex 容器上使用

width: max-content

。这将使容器的宽度与其内容相匹配。

这与 gavgrif 的答案类似，但这不会建立内联格式化上下文。这对于您的用例可能重要也可能不重要。

Answer 2

尝试使用

display: inline-flex

，这将使其成为一个像行内元素一样呈现的 Flex 容器。

更新：-我添加了两种柔性显示结果的演示。需要认识到的重要一点是，Flex 行为位于 Flex-container 的子级上，并且两种类型的 Flex 之间的布局没有差异。

区别在于父容器相对于周围页面内容的呈现方式。使用

display: flex

- 容器被渲染为具有弯曲子元素的块级元素。使用

display: inline-flex

- 容器将呈现为具有弯曲子元素的内联级别元素。

.flex-container {
    display: flex;
    align-items: center;
    border :solid 1px red; /* just for illustration sake */
    cursor: pointer;
    padding: 0 8px;
    }
    

.inline-flex-container {
    display: inline-flex;
    align-items: center;
    border:solid 1px blue; /* just for illustration sake */
    cursor: pointer;
     padding: 0 8px;
    
    
    }
    
    
.caret {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #000000 transparent transparent transparent;
  display: inline-block;
  margin-left: 6px;
  top: 0;
  position: relative;
}

<p>Display: flex (causes a block-level parent container and flexed children)</p>
<div class="flex-container">
  <button type="button">Button</button>
  <span class="caret"></span>
</div>

<hr/>
<p>Display: inline-flex (causes an inline-level parent container and flexed children</p>
<div class="inline-flex-container">
  <button type="button">Button</button>
  <span class="caret"></span>
</div>

Answer 3

除了

width: max-content

之外，

width: min-content

和

width: fit-content

也值得尝试。所有 3 个 CSS 属性都会将目标元素大小调整为其内容大小，并可能根据上下文/情况实现您想要的行为。