Undesired margin between flexboxes when viewed on mobile
Question
I've got an issue on my webpage that involves margins popping up next to flexboxes when the site is viewed on mobile. I've distilled the issue down to some pretty simple code.
HTML Code
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- When you remove this period, issue goes away -->
.
<div class="smallboxes">
<div class="smallbox1">
</div>
<div class="smallbox2">
</div>
</div>
<div class="bigbox">
</div>
</div>
</body>
</html>
CSS code
.container {
display: flex;
height: 100px;
}
.bigbox {
flex: 2;
background-color: #6e6e6e;
display: flex;
}
.smallboxes {
flex: 1;
display: flex;
flex-direction: column;
}
.smallbox1 {
flex: 2;
background-color: #6e6e6e;
}
.smallbox2 {
flex: 1;
}
When you run the code in Chrome, right-click, click "Inspect", view as IPad Pro in horizontal mode and change the view to 75% or 125%. You'll see a white line between the two boxes. This is showing up on my Note 5 as well. There should be no line between the two grey boxes.
As I mention in the code, when you remove the period, the issue goes away.
Thanks a ton for the help!
PS I'm new to SO and can't seem to figure out how insert the "run codepen on this code" button. I'm including a link to the codepen version of this as well.
2 answers
solution1
0 2017-03-09 09:59:09
edit: new answer based on comments of author
I've been playing with your Codepen and the problem is because of the use of "Flex: 1". Flex creates the needed space inside your "container". if you give ".bigBox" flex:2; and ".smallBoxes" flex:1; it will divide ".container" into 3 parts where bigBox will take up 2. When you add an item inside the container without giving it a flex-value, it will try to calculate the needed space. Try placing the dot inside a span or div (or other element) and give it a flex-value. This will solve your problem.
.container { display: flex; height: 100px; background: red } .bigbox { flex: 5; background-color: #6e6e6e; display: flex; } .testBox { background: yellow; flex: 1; } .smallboxes { flex: 3; display: flex; flex-direction: column; } .smallbox1 { flex: 2; background-color: #6e6e6e; } .smallbox2 { flex: 1 }
<html> <head> <link href="style.css" rel="stylesheet"> </head> <body> <div class="container"> <!-- When you remove this period, issue goes away --> <span class="testBox">test</span> <div class="smallboxes"> <div class="smallbox1"> </div> <div class="smallbox2"> </div> </div> <div class="bigbox"> </div> </div> </body> </html>
solution2
0 2017-03-11 20:20:04
You're code works, but when you add margin of 0 to the body, it breaks again. Do you know why?
body { margin: 0; } .container { display: flex; height: 100px; background: red } .bigbox { flex: 5; background-color: #6e6e6e; display: flex; } .testBox { background: yellow; flex: 1; } .smallboxes { flex: 3; display: flex; flex-direction: column; } .smallbox1 { flex: 2; background-color: #6e6e6e; } .smallbox2 { flex: 1 }
<html> <head> <link href="style.css" rel="stylesheet"> </head> <body> <div class="container"> <!-- When you remove this period, issue goes away --> <span class="testBox">test</span> <div class="smallboxes"> <div class="smallbox1"> </div> <div class="smallbox2"> </div> </div> <div class="bigbox"> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.