Closed
Bug 1162401
Opened 10 years ago
Closed 10 years ago
Flex box calculates the wrong height and does not wrap.
Categories
(Core :: Layout, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: nilssonanders79, Unassigned)
References
Details
(Keywords: css3, testcase)
Attachments
(2 files)
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36
Steps to reproduce:
The following html shows the issue in firefox.
<!DOCTYPE HTML>
<html class="boxsizeBrd HtWd100pcMaPaBd0">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Example: Equal Height Columns with CSS Flexible Box Layout</title>
<style>
#box {
border: 1px #666666 solid;
position: absolute;
top: 50px;
left: 50px;
width: 300px;
height: 300px;
margin: 5px;
background-color: beige;
display: flex;
flex-direction: column;
}
.header {
flex: 0 0 auto;
font-size: 25px;
padding: 10px;
font-weight: bold;
background-color: lightblue;
}
.container {
flex: 1 1 auto;
display: flex;
}
.wrapper {
flex: 1 1 auto;
display: flex;
flex-direction: column;
flex-wrap: wrap;
background-color: lightgreen;
overflow: auto;
}
.flex-item {
border-right: 1px solid grey;
border-bottom: 1px solid grey;
width: 31%;
}
</style>
</head>
<body>
<div id="box">
<div class="header">Header</div>
<div class="container">
<div class="wrapper">
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
</div>
</div>
</div>
</body>
</html>
Actual results:
Even though the .wrapper div is set to flex-wrap the columns the flex item list grows outside of it's parent's height.
Expected results:
I expect the flex items to wrap. Just like they do in ie, safari and chrome.
|
||
Updated•10 years ago
|
|
|
||
Updated•10 years ago
|
Component: Untriaged → CSS Parsing and Computation
|
||
Comment 1•10 years ago
|
||
Firefox is following the spec here.
This is due to flexbox's quirky "min-height:auto" behavior (on .container in this case, which is both a flex item and a flex container). You need to set "min-height:0" on that element to suppress this behavior.
Firefox is the only release browser to have this "min-height:auto" behavior implemented, which is why it *looks* like a Firefox bug compared to other browsers. However, Microsoft's next-gen "Edge" has it implemented as well, and Google recently fixed this in Chrome in https://code.google.com/p/chromium/issues/detail?id=426898 , so their "Dev Edition" matches Firefox on your testcase.
Blocks: minsizeauto-fallout
Status: UNCONFIRMED → RESOLVED
Closed: 10 years ago
Resolution: --- → INVALID
|
|
||
Comment 2•10 years ago
|
||
|
|
||
Comment 3•10 years ago
|
||
Here's the fixed version of your testcase. Unlike the previous attachment, this one renders with wrapping (the way you want it to render, I think) in both Firefox Nightly (ver 40) & Chrome Dev Edition (ver 44), on my local linux box.
|
|
||
Comment 4•10 years ago
|
||
Also, for reference, the relevant spec test is here: http://dev.w3.org/csswg/css-flexbox/#min-size-auto
|
|
||
Updated•10 years ago
|
Component: CSS Parsing and Computation → Layout
You need to log in
before you can comment on or make changes to this bug.
Description
•