Chrome不会根据孩子的内容展开flex parent [重复]
Posted
技术标签:
【中文标题】Chrome不会根据孩子的内容展开flex parent [重复]【英文标题】：Chrome does not expand flex parent according to children's content [duplicate] 【发布时间】：2018-01-10 22:46:33 【问题描述】：我需要并排显示几个框。每个盒子都有可变数量的子项目。父项应根据子项占用的空间进行扩展。项目具有固定宽度很重要。我正在使用 flexbox 进行布局。它应该是这样的：
我写了一个Plunkr来说明。
问题：当子级占用更多空间时，Chrome 不会扩展父级。子项显示超出父项边界并出现在相邻父项中，从而导致这种混乱：
具有讽刺意味的是，如果您在 IE 11 或 Edge 中打开 Plunkr，它可以正常工作。
我做错了什么？
这是一个代码sn-p：
body
display: flex;
overflow: scroll;
.parent
border: 1px solid grey;
padding: 0 20px;
display: flex;
flex-direction: column;
.items
display: flex;
.items span
flex-basis: 25px;
flex-shrink: 0;
<div class="parent">
<h4>Parent 1</h4>
<div class="items">
<span>i1</span>
<span>i2</span>
<span>i3</span>
<span>i4</span>
<span>i5</span>
</div>
</div>
<div class="parent">
<h4>Parent 2</h4>
<div class="items">
<span>i1</span>
<span>i2</span>
<span>i3</span>
<span>i4</span>
<span>i5</span>
</div>
</div>
<div class="parent">
<h4>Parent 3</h4>
<div class="items">
<span>i1</span>
<span>i2</span>
<span>i3</span>
<span>i4</span>
<span>i5</span>
</div>
</div>
<div class="parent">
<h4>Parent 4</h4>
<div class="items">
<span>i1</span>
<span>i2</span>
<span>i3</span>
<span>i4</span>
<span>i5</span>
</div>
</div>
<div class="parent">
<h4>Parent 5</h4>
<div class="items">
<span>i1</span>
<span>i2</span>
<span>i3</span>
<span>i4</span>
<span>i5</span>
</div>
</div>
<div class="parent">
<h4>Parent 6</h4>
<div class="items">
<span>i1</span>
<span>i2</span>
<span>i3</span>
<span>i4</span>
<span>i5</span>
</div>
</div>【问题讨论】：
使用宽度而不是弹性基础的作品 这是嵌套弹性容器中发生的已知错误。请参阅副本顶部答案中的“浏览器错误”部分。 【参考方案1】：请检查一下
使用 box-sizing : 边框框；对于父元素，使用width来保持每个元素的宽度
https://plnkr.co/edit/3p8PwmLtHYozEFveRvTX
/* Styles go here */
body
display: flex;
overflow: scroll;
.parent
border: 1px solid grey;
padding: 0 20px;
display: flex;
flex-direction: column;
box-sizing : border-box;
.items
display: flex;
.items span
width: 25px;
html：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="parent">
<h4>Parent 1</h4>
<div class="items">
<span>i1</span>
<span>i2</span>
<span>i3</span>
<span>i4</span>
<span>i5</span>
<span>i1</span>
<span>i2</span>
<span>i3</span>
<span>i4</span>
<span>i5</span>
</div>
</div>
<div class="parent">
<h4>Parent 2</h4>
<div class="items">
<span>i1</span>
<span>i2</span>
<span>i3</span>
<span>i4</span>
<span>i5</span>
</div>
</div>
<div class="parent">
<h4>Parent 3</h4>
<div class="items">
<span>i1</span>
<span>i2</span>
<span>i3</span>
<span>i4</span>
<span>i5</span>
</div>
</div>
<div class="parent">
<h4>Parent 4</h4>
<div class="items">
<span>i1</span>
<span>i2</span>
<span>i3</span>
<span>i4</span>
<span>i5</span>
</div>
</div>
<div class="parent">
<h4>Parent 5</h4>
<div class="items">
<span>i1</span>
<span>i2</span>
<span>i3</span>
<span>i4</span>
<span>i5</span>
</div>
</div>
<div class="parent">
<h4>Parent 6</h4>
<div class="items">
<span>i1</span>
<span>i2</span>
<span>i3</span>
<span>i4</span>
<span>i5</span>
</div>
</div>
</body>
</html>
【讨论】：
是的！这样可行！您能否用更改的内容更新您的答案（即将box-sizing: border box; 应用于弹性父母并从孩子中删除flex-shrink: 0;）？通过这种方式，其他人更容易看到修复，无需比较每一行代码。
仔细观察，它打破了每个项目 25px 的固定宽度...有什么线索吗？
.items span width : 25px; 使用 width:25px 保持每个项目的宽度。我将用解决问题的方法更新答案
box-sizing与此无关【参考方案2】：
尝试添加inline-flex而不是flex，还注释掉了一些不需要的flex样式请参考这里，
/* Styles go here */
body
/* display: flex; */
overflow: scroll;
.parent
border: 1px solid grey;
padding: 0 20px;
display: inline-flex;
flex-direction: column;
.items
/* display: flex; */
.items span
flex-basis: 25px;
flex-shrink: 0;
<div class="parent">
<h4>Parent 1</h4>
<div class="items">
<span>i1</span>
<span>i2</span>
<span>i3</span>
<span>i4</span>
<span>i5</span>
</div>
</div>
<div class="parent">
<h4>Parent 2</h4>
<div class="items">
<span>i1</span>
<span>i2</span>
<span>i3</span>
<span>i4</span>
<span>i5</span>
</div>
</div>
<div class="parent">
<h4>Parent 3</h4>
<div class="items">
<span>i1</span>
<span>i2</span>
<span>i3</span>
<span>i4</span>
<span>i5</span>
</div>
</div>
<div class="parent">
<h4>Parent 4</h4>
<div class="items">
<span>i1</span>
<span>i2</span>
<span>i3</span>
<span>i4</span>
<span>i5</span>
</div>
</div>
<div class="parent">
<h4>Parent 5</h4>
<div class="items">
<span>i1</span>
<span>i2</span>
<span>i3</span>
<span>i4</span>
<span>i5</span>
</div>
</div>【讨论】：
CSS 不支持// 行 cmets，仅支持多行 /* */。编辑您的答案以修复损坏的 CSS :)
这也会改变所需的布局。 body 的内容不应换行。【参考方案3】：
这似乎是 Chrome 中的一个错误。
在这部分代码中：
.items span
flex-basis: 25px;
flex-shrink: 0;
... Chrome 不遵守固定的 25px 宽度。或者，至少，容器没有识别空间。看起来容器的大小是在考虑所有项目计算之前进行的。
简单的解决方法是使用width 而不是flex-basis。
.items span
flex-shrink: 0;
width: 25px;
revised demo
更新
错误报告
Flex-basis is being ignored when sizing nested flex containers.
“是的，这是我们遇到的一个错误造成的糟糕后果，也许与不幸的规范后果相结合......”
“当外部弹性盒找到内部弹性盒的所需大小时，它会询问其最大内容大小（请参阅 LayoutFlexibleBox::computeInnerFlexBaseSizeForChild）。但这就是问题所在，最大内容大小确实如此不考虑
flex-basis，只考虑宽度属性/实际内容。这就是为什么添加显式宽度可以修复错误。"
【讨论】：
那么 Firefox 也会遇到同样的错误 :) 是的，这发生在 chrome、firebox 和 safari 中......当心：我相信这个错误可能并不总是发生，并且两个具有相同样式的相同元素最终可能看起来不同。例如，在 chrome 开发工具上修改样式我最终得到了一个好看的元素，但是当将其样式和内容复制到实际源时，错误破坏了它。即使下载看起来正确的源代码并在新标签中打开它也会看起来不正确。以上是关于Chrome不会根据孩子的内容展开flex parent [重复]的主要内容，如果未能解决你的问题，请参考以下文章