padding will break flexbox layout
Reported by
craigco...@gmail.com,
Feb 19 2017
|
||||||||
Issue description
Chrome Version : 50
URLs (if applicable) :
Other browsers tested:
Add OK or FAIL, along with the version, after other browsers where you
have tested this issue:
Safari: yes
Firefox:
IE:
What steps will reproduce the problem?
1. copy the code below and test it on iphone safari or iphone chrome
2. Now un-comment the rule .random in the code and test it again on iphone safari or iphone chrome
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow: scroll;
min-height: 100%;
display: flex;
font-size: 62.5%;
}
body {
display: flex;
flex: 1;
}
.chats {
flex: 1;
display: flex;
flex-direction: column;
}
p {
padding: 10px;
}
.box {
background: blue;
flex: 1;
}
.random {
padding-top:1rem;
/* try to un-commnet this rule and the observe the blue box, it will become very small */
}
</style>
</head>
<body>
<div class="chats">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="box">box</div>
</div>
</body>
</html>
What is the expected result?
layout not break
What happens instead?
layout break even though I do not use the class
Please provide any additional information below. Attach a screenshot if
possible.
,
Feb 20 2017
,
Feb 22 2017
eugenebut@ can you take a look?
,
Feb 22 2017
Rick, do you think is a bug? If so I will file a radar. Thanks!
,
Mar 27 2017
,
May 10 2017
,
Jul 12 2017
,
Sep 29 2017
I can't reproduce this in M61 anymore so I'll close this. Please reopen if you have additional information. |
||||||||
►
Sign in to add a comment |
||||||||
Comment 1 by craigco...@gmail.com
, Feb 19 2017