Html 未使用divs或set width的flex容器中未包含图像标记

我目前正在尝试将图像放在一行中的

flex

容器中。我注意到图像“忽略”容器的宽度并溢出页面，除非您使用

div

包装每个图像标记，或者向图像添加

minwidth:1%

HTML:

修复溢出问题：

.container img {
  flex: 1;
  min-width: 1%; /* width of images adjust to the parent container */
  object-fit: cover;
}

我只是想知道这是正常的行为还是我有一些CSS导致的

.container{
显示器：flex；
弯曲方向：行；
高度：300px；
边缘底部：20px；
}
.集装箱img{
弹性：1；
对象匹配：覆盖；
}
.container.fix img{
弹性：1；
最小宽度：1%；
对象匹配：覆盖；
}

.container{
显示器：flex；
弯曲方向：行；
高度：300px；
边缘底部：0px；
}
.集装箱img{
弹性：2；
对象匹配：覆盖；
}
.container.fix img{
弹性：2；
最小宽度：1%；
对象匹配：覆盖；
}

.container{
显示器：flex；
弯曲方向：行；
高度：300px；
边缘底部：0px；
}
.集装箱img{
弹性：2；
对象匹配：覆盖；
}
.container.fix img{
弹性：2；
最小宽度：1%；
对象匹配：覆盖；
}

我们正在寻找能够提供一些解释和背景的详细答案。不要只是给出一个密码答案；解释为什么你的答案是正确的，最好是引用。解释总是有帮助的……而且我认为你不理解问题所在，将flex:1更改为2不会改变任何事情。我们正在寻找提供一些解释和上下文的长答案。不要只是给出一个密码答案；解释为什么你的答案是正确的，最好是引用。解释总是有帮助的……而且我认为你不理解问题所在，将flex:1更改为2不会改变任何东西。相关？-我们可以在这里用@Michael_B解释一下。flex项目的初始设置是

minwidth:auto

。这意味着，默认情况下，flex项不能小于其内容的大小。这些图像是flex容器的子对象，使它们成为flex项目。它们的最小大小将是图像的自然宽度，在这种情况下会导致溢出。您可以使用

最小宽度：0

（或

最小宽度：1%

，如问题中所示）覆盖默认值@UncaughtTypeError感谢您的解释！：）相关的我们可以在这里用@Michael_B解释一下。flex项目的初始设置是

minwidth:auto

。这意味着，默认情况下，flex项不能小于其内容的大小。这些图像是flex容器的子对象，使它们成为flex项目。它们的最小大小将是图像的自然宽度，在这种情况下会导致溢出。您可以使用

最小宽度：0

（或

最小宽度：1%

，如问题中所示）覆盖默认值@UncaughtTypeError感谢您的解释！：）

.container {
  display: flex;
  flex-direction: row;
  height: 300px;
  margin-bottom: 20px;
}

.container img {
  flex: 1;
  object-fit: cover;
}

.container img {
  flex: 1;
  min-width: 1%; /* width of images adjust to the parent container */
  object-fit: cover;
}