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

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
}

尽管项目不会拉伸，但它会连续占用所有可用的 space。问题是，当用户从按钮指向右侧时，它的反应就像鼠标在按钮上一样。我希望 flexbox 容器在第二个项目之后结束。它是怎么做到的？

margin-right: auto 无效

Answer 1

尝试使用 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 2

您可以在 flex 容器上使用 width: max-content。这将使容器的宽度与其内容匹配。

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

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

how to make flex container to shrink to a smallest reasonable size?

css

flexbox

margin