Question

我试图阻止父母分组比使用min-width和fit-content的孩子小。

我首先使用.parent设置了一个分部min-width: fit-content。然后我添加了width: 100px和min-width: fit-content的孩子。最后，我给孩子们添加了足够多的角色来破坏100px;

＆＃13;

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

＆＃13;

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

＆＃13;

样本： https://codepen.io/osasseville/pen/NadrgB?editors=1100

我希望父母能够适应孩子的内容，这些内容符合角色的内容。

奇怪的是，如果我将儿童的宽度更改为1％，则最小宽度会受到尊重。

Answer 1

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

在这里你已经将子div的宽度定义为100px，因此父div宽度也将仅扩展到100px，并且在子div之外溢出的文本不被视为父div的内容。 / p>

如果您希望父级符合子级的内容，则应将子div的宽度更改为fit-content

像这样

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您还可以将 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>

Answer 3

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

首先，在HTML中，默认情况下，大多数元素都有两种类型的渲染（这实际上是简化的）：块级或内联。块级元素将其父级的宽度。内联元素将其内容的宽度。
因此，如果您了解这一原则，您将会看到父元素与其子元素一样宽，其内容非常简单。这是一个例子：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

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

3 个答案: