我可以让子元素占用最大宽度，而父组件有“宽度：适合内容”吗？

Question

请看https://jsfiddle.net/y0jorbsf/1/

子元素有max-width: 1000px，因为我的意图是让它尽可能多地占用1000px的宽度。

但是，当父级有width: fit-content; 时，这不起作用。孩子总是拿最低限度宽度。在这种情况下，max-width: 1000px 似乎被覆盖了。

我想知道为什么以及如何达到效果：父母仍然有width: fit-content;，而孩子仍然与max-width一样多。

提前致谢！

Answer 1

您需要将 max-width 移动到父级，并像这样删除 h1 元素中的 width:fit-content

   div {
    height: 100px;
  background-color: white;
  max-width: 1000px;
}

h1 {
  color: white;
  text-align: center;
  background-color: green;
}