在 css 中使用 fit-content 自动调整宽度答案

【问题标题】：Auto-sizing width with fit-content in css在 css 中使用 fit-content 自动调整宽度
【发布时间】：2019-10-17 19:45:17
【问题描述】：

我正在尝试使用min-width 和fit-content 来防止父分区小于子级。

我首先用min-width: fit-content 设置了一个部门.parent。然后，我添加了一个带有width: 100px 和min-width: fit-content 的孩子。最后，我为孩子们添加了足够多的字符来破坏100px；

.parent {
  border: 1px solid red;
  width: fit-content;
}

.children {
  border: 1px solid green;
  min-width: fit-content;
  width: 100px;
}

<div class="parent">
  <div class="children">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  </div>
</div>

演示： https://codepen.io/osasseville/pen/NadrgB?editors=1100

我希望父母适合孩子的内容，适合角色的内容。

奇怪的是，如果我将孩子的宽度更改为 1%，min-width 会受到尊重。

【问题讨论】：

这很可能是因为子容器适合其字符内容。所以基本上父母必须扩大才能容纳它的孩子。它与 % 一起使用是因为它是测量的相对单位，但 px 不是，它是固定的。我不完全确定，但这似乎正在发生......
浏览器对fit-content 的支持并未得到广泛支持。不确定您使用的是哪个浏览器，但听起来这可能与您的问题有关：developer.mozilla.org/en-US/docs/Web/CSS/…
@AjayGupta 更奇怪，1vw（相对）不被尊重。
@OlivierSasseville，您在 Chrome 中进行测试吗？因为浏览器支持对fit-content 来说真的很糟糕：https://caniuse.com/#search=fit-content
我不确定您要做什么...因为如果您希望父框宽度及其子框宽度与内部内容相关，则不需要fit-content ，这只是基本的 CSS... 还是只是为了测试 fit-content 的值？

标签： html css

【解决方案1】：

代码正常运行。父 div 只会将其宽度拉伸到其中的内容，即子 div。

这里你定义了子div的宽度为100px，所以父div的宽度也只会扩大到100px，关于溢出子div外的文字，不被认为是父div的内容。

如果要让父级适应子级的内容，则应将子级div的宽度更改为fit-content

喜欢这个

.parent {
  border: 1px solid red;
  width: fit-content;
}

.children {
  border: 1px solid green;
  width: fit-content;
}

<div class="parent">
  <div class="children">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  </div>
</div>

【讨论】：

【解决方案2】：

好的，所以我不确定我是否完全理解您想要做什么，但我们可以从这个答案开始。我不知道你对 CSS 了解多少，所以不要被我的回答冒犯。

首先，在 HTML 中，大多数元素默认有两种渲染类型（这真的很简单）：block-level 或 inline。块级元素将采用其父级的宽度。内联元素将采用其内容的宽度。
因此，如果您了解该原则，您会发现让父元素与其内容一样宽的子元素一样宽是非常简单的。这是一个例子：

.parent {
   border: 1px solid red;
   /* This will make the parent as wide as its content */
   display: inline-block;
}

.children {
   border: 1px solid green;
   /* This is just so that we see if it's working */
   max-width: 100px;
}

<div class="parent">
  <div class="children">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

现在，当然还有其他方法可以做到，但这是最简单的解决方案。最佳解决方案取决于您的具体情况。

【讨论】：

@Olivier Sasseville 我的回答是否帮助您实现了您想做的事情？

【解决方案3】：

您也可以将 display:inline-block; 与 Anupam Raut 的回答一起使用：

    <style>
        .parent {
          border: 1px solid red;
          width: fit-content;
          display: inline-block;
        }

        .children {
          border: 1px solid green;
          min-width: fit-content;
        }
    </style>

和html：

<div class="parent">
      <div class="children">
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
      </div>
    </div>

【讨论】：