对 div 的宽度使用 calc() 似乎不起作用

Question

我想在同一行中放置一个文本输入和两个按钮。文本输入的长度应最大化，以便所有内容仍然适合一行：

<div style="display:flex; flex-flow:row nowrap; align-items:center; justify-content:space-between; width:100%;">
    <!-- div style='width:calc(~"100% - 150px")' -->
    <div style='width: calc(50% - 120px);'>
        <SfTextBox FloatLabelType="@FloatLabelType.Never" Placeholder='' Value=@WatermarkID() Enabled="false"></SfTextBox>
    </div>
    <div><SfButton Type="button" Content="Edit..." @onclick="EditWatermark" IsPrimary="false"></SfButton></div>
    <div><SfButton Type="button" Content="Remove..." @onclick="RemoveWatermark" IsPrimary="false"></SfButton></div>
</div>

这是结果（Google Chrome）：

如果我给出 div 例如宽度为 50% (style="width:50%;")，div 的宽度会根据需要设置。上面的代码显示了另一种在注释掉的行中调用 calc 的尝试，但也没有成功。

我需要做什么才能得到想要的结果（文本输入尽可能长，按钮在右边），为什么 calc 在这里似乎不起作用？

Answer 1

如果您希望将两个按钮都推到右侧并且输入字段占用所有可用的 space 左侧，您可以使用 flexbox（您已经在使用的）：

删除 justify-content: space-between 属性（不再需要）并将输入字段的宽度设置为 100%。按钮需要属性 flex-shrink: 0; 这样它们就不会缩小。

工作示例：

<div style="display: flex; width: 100%;">
  <div style="height: 30px; background: orange; width: 100%;"></div>
  <button style="flex-shrink: 0;">Hello</button>
  <button style="flex-shrink: 0;">World</button>
</div>

如果你想要元素之间有一些间距，你可以在 flex 容器上使用 gap 属性，例如gap: 10px;.

Answer 2

您的代码正在运行，只是不是您期望的方式（文本输入尽可能长，按钮在右侧）。

只需几件事情就能让它如您所愿地工作：

删除“justify-content:space-between;”在#d1（文本输入尽可能长意味着没有space）
将#d2 中的“width: calc(50% - 120px)”替换为“width:100%”，使其填满space。当您在 #d1 中使用“display:flex”时，其中的项目将“弯曲”，使其不会占据 #d1 的整个 100% 宽度，但会缩小一点以实现“尽可能长的按钮位于其右侧”。 =25=]
将“width:100%”添加到您的输入中

<div id="d1" style="display:flex; flex-flow:row nowrap; align-items:center;width:100%;">
    <div id="d2" style='width:100%;'>
        <input type='text' style="width:100%">
    </div>
    <div id="d3"><button>Edit...</button></div>
    <div id="d4"><button>Remove...</button></div>
</div>

对 div 的宽度使用 calc() 似乎不起作用

Using calc() for width of div doesn't seem to work

html

calc