FlexBox - container width not expanding when using percent margin

Question

I built a simple page using FlexBox CSS, and I don't understand why when I use a percent margin on one of the items, the width of the container is not expanding.

Note: Problems exists in Chrome / FireFox.

Code Pen: https://codepen.io/dsomekh/pen/QvGvrq

Example:

<html>
<style>
.page{
    display:flex;
    /*border: 5px solid orange;*/
}

.container{

display:flex;
border: 5px solid orange;
}
.item_left{
display:flex;
margin-right:25%;
}

.item_right{
display:flex;

}
</style>
<div class="page">
    <div class="container">
        <div class="item_left">Left</div>
        <div class="item_right">Right</div>
    </div>
</div>
</html>

https://www.w3.org/TR/css-flexbox-1/ *"Authors should avoid using percentages in paddings or margins on flex items entirely, as they will get different behavior in different browsers."* What are you trying to do exactly? — Michael Coker, Apr 25 '17 at 19:30
From what I know, defining the margin as % is better for a responsive layout. Currently I am using px to define the margin, is there a better solution? — David Somekh, Apr 25 '17 at 19:33
Use viewport units `vw`/`vh` .... https://codepen.io/anon/pen/mmOwPW — Asons, Apr 25 '17 at 19:39
Added a sample too, in previous comment. I can post that as an answer if you like — Asons, Apr 25 '17 at 19:41
Sure, you can post it as an answer. I think you should also include the reference Michael gave. — David Somekh, Apr 25 '17 at 19:44
@DavidSomekh there is also always `em` and `rem` for relative margins. nothing wrong with using `px` if it works with your layout. — Michael Coker, Apr 25 '17 at 19:49

score 1 · Answer 1 · answered Apr 25 '17 at 19:31

1

You're using flexbox wrong.

try

.container{
  display:flex;
}

.item_left {
  flex: 1;
  border: 5px solid orange;
  margin-right:25%;
}

.item_right {
  flex: 1;
  border: 5px solid orange;
}

<div class="page">
 <div class="container">
  <div class="item_left">Left</div>
  <div class="item_right">Right</div>
 </div>
</div>

answered Apr 25 '17 at 19:31

Jean Mayer

11
1
7

Your code causes the two items in the container expand through the entire page. Is there some way to avoid it? – David Somekh Apr 25 '17 at 19:39
May I ask what is wrong with OP's code? – Asons Apr 25 '17 at 20:07
@DavidSomekh It is the lack of using `display: flex` for the `.page`, together with using `flex: 1` on the items, that cause it to use full page width. Remove the `flex: 1` and you'll see yet another layout. – Asons Apr 25 '17 at 20:10

score 0 · Accepted Answer · edited May 23 '17 at 12:02

As Michael Coker commented, Authors should avoid using percentages in paddings or margins on flex items entirely, as they will get different behavior in different browsers. (CSS Flexbox margins)

When using percent we often relate that to the viewport width, so with that in mind, viewport units vw/vh can be a good option, since it works similar (responsive).

Stack snippet made of your Codepen sample

.page {
  display: flex;
  /*border: 5px solid orange;*/
}

.container {
  display: flex;
  border: 5px solid orange;
}

.item_left {
  flex: 1;
  margin-right: 25vw;
}

.item_right {
  display: flex;
  flex: 1;
}

<div class="page">
  <div class="container">
    <div class="item_left">Left</div>
    <div class="item_right">Right</div>
  </div>
</div>

Stack snippet made of your questions code

.page {
  display: flex;
  /*border: 5px solid orange;*/
}

.container {
  display: flex;
  border: 5px solid orange;
}

.item_left {
  display: flex;
  margin-right: 25vw;
}

.item_right {
  display: flex;
}

<div class="page">
  <div class="container">
    <div class="item_left">Left</div>
    <div class="item_right">Right</div>
  </div>
</div>

FlexBox - container width not expanding when using percent margin

2 Answers2