Flex容器没有得到它的孩子的全部宽度[重复]答案

【问题标题】：Flex container not getting full width of its children [duplicate]Flex容器没有得到它的孩子的全部宽度[重复]
【发布时间】：2020-04-10 07:55:52
【问题描述】：

考虑以下简单的弹性网格：

.container {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.container:hover {
  background-color: orange;
}

.child {
  display: flex;
  padding: 4px;
  flex: 1;
  height: 24px;
  border: 1px solid grey;
  width: 50px;
  min-width: 50px;
  max-width: 50px;
}

<div class="container">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

我需要我的container:hover 来完成整条生产线。修复橙色悬停线不够大，无法悬停在所有子项中（向右滚动查看效果）。

如何使container 获得其children 的宽度？

【问题讨论】：

inline-flex 代替 flex
并移除 width:100% （将其替换为 min-width）
@Termani：您的建议无效。同样的问题：.container { display: inline-flex; flex-direction: row; min-width: 100%; }
对我有用：jsfiddle.net/0qhxovfc

标签： html css

【解决方案1】：

问题是 .container 的宽度更小，然后是所有子项的宽度相加。

UPDATE 您应该将 parent 切换到 display: inline-flex; 并移除 width: 100%;

.container {
  display: inline-flex;
  flex-direction: row;      
}

.container:hover {
  background-color: orange;
}

.child {
  display: flex;
  padding: 4px;
  flex: 1;
  height: 24px;
  border: 1px solid grey;
  width: 50px;
  min-width: 50px;
  max-width: 50px;
}

<div class="container">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

【讨论】：

flex-wrap 会让我换行。弹性子代必须保持不变。此外，悬停在孩子身上不会使我的容器变大。我的问题是如何让容器增长。
刚刚更新了答案。

【解决方案2】：

如果您希望悬停覆盖所有子项，则应将其应用于子项：

.container:hover .child {
  background-color: orange;
}

注意：这将修复您想要修复的内容，但不会直接使容器获取其子容器的宽度。

最好的

【讨论】：