有关于此的问题和文章,但据我所知,没有任何结论.我能找到的最好的总结是
flex-basis允许您在计算任何其他内容之前指定元素的初始/起始大小.它可以是百分比或绝对值.
...这本身并没有说明基于柔性基组的元素的行为.根据我目前对flexbox的了解,我不明白为什么它也无法描述宽度.
我想知道flex-basis与实际宽度的不同之处:
编辑/澄清:这个问题已经以不同的格式询问了什么是flex-basis属性集？但我觉得更直接的比较或总结柔性基础和宽度(或高度)的差异将是不错的.
如果父元素的总内容高度为 10,000 像素，但overflow: auto元素呈现的高度为 700aside像素，如何强制子元素动态呈现为 10,000 像素而不是默认的 700像素？当您开始滚动Fiddle 时，您可以看到白色背景。
::after和::before是可以接受的，虽然）。aside元素必须有它的与内容滚动main通过元素的内容#body元素（无position: fixed;）。aside元件必须具有它的background-color在0像素到最底部（例如5,000px或10,000px）远离最顶部拉伸下面的初始可见的折叠。aside元素不能有它自己的overflow: auto;.height，例如height: 10000px因为我们不知道渲染的高度是多少。在我的示例中，当您开始滚动绿色background-color末端时，我想让aside元素一直延伸到内容底部。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Overflow Flex Box Issue</title>
<style type="text/css"> …这是简化的布局:
<div class="root">
<div class="container">
<div class="cell">
<input type="text" class="contact"></input>
</div>
</div>
</div>
这是简化的CSS:
.root {
background-color: red;
overflow: auto;
width: 300px;
}
.container {
background-color: green;
display: flex;
height: 50px;
}
.cell {
background-color: black;
height: 30px;
}
.contact {
width: 400px;
}
这是jsFiddle.
我有点意外的是,它的container宽度与它的孩子所需的宽度不同,而是受到它的限制root div.您可以在此jsFiddle中看到红色区域(根div)未填充绿色container div.
有人可以解释为什么flex容器宽度不会随着它的孩子而增长以及如何解决这个问题？