4

So I found out the hard way that flexbox doesn't respect the box-sizing: border-box; CSS declaration. Fine. But is there some way to get that functionality using a flexbox layout?

Check out this JS Fiddle. We have 3 rows with 3 boxes in each row. I'd like all the boxes to be the same size. The middle box in the middle row has some margin & border properties making it bigger. In the box model, we would solve that with box-sizing: border-box. Is there some equivalent in the flexbox model?

Live Demo:

$(function() {    
  for(var i = 1; i <= 3; i++) {
    $('<div class="row" id="row' + i + '">').appendTo($('#grid'));
    
    for(var j = 0; j < 3; j++) {
      if(i === 2 && j === 1) {
        $('<div class="box2">').appendTo($('#row' + i));
      } else {
        $('<div class="box">').appendTo($('#row' + i));
      }
    }
  }
});
html {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 300px;
}

body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

#grid {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 25px solid cornflowerblue;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.row {
  width: 100%;
  height: auto;
  margin: 10px;
  box-sizing: border-box;
  border: 1px solid red;
  display: flex;
}

.box {
  flex-grow: 1;
  margin: 10px;
  background: pink;
}

.box2 {
  flex-grow: 1;
  margin: 10px;
  box-sizing: border-box;
  border: 25px solid purple;
  background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="grid"></div>
</body>
Maximillian Laumeister
  • 19,884
  • 8
  • 59
  • 78
The Qodesmith
  • 3,205
  • 4
  • 32
  • 45
  • 1
    @Max - how did you edit the post to include the code on the page like that? – The Qodesmith Aug 02 '15 at 21:31
  • 2
    Glad you asked! [Here's a blog post explaining](https://blog.stackexchange.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). – Maximillian Laumeister Aug 02 '15 at 21:33
  • I also just noticed that the demo doesn't really work if you just click "run demo" without full screening it. I edited your code to be `html {height: 300px;}` so it better illustrates what you're trying to show. Hope you don't mind. – Maximillian Laumeister Aug 02 '15 at 21:36
  • @MaximillianLaumeister Thank you. – The Qodesmith Aug 02 '15 at 23:05
  • Is there a reason for a margin and border? The border I guess is for aesthetics? If so substitute border with outline. Why is the margin necessary if your'e using flexbox? – zer00ne Aug 02 '15 at 23:16
  • @zer00ne The outline substitution is definitely a good idea, but [by using outline instead of border we lose some customization options](http://stackoverflow.com/a/20398566/2234742). Ideally there is a solution that lets us continue using `border`, but if not, your suggestion seems like a good workaround. – Maximillian Laumeister Aug 02 '15 at 23:50
  • True with outline, you can't use border-radius and there's no left, right, top, or bottom outline either. Try my answer out, see if it works. – zer00ne Aug 02 '15 at 23:53
  • 3
    Note `box-sizing` does work with flex-box. However, `flex-grow` distributes available space by increasing the width of the flex items, ignoring whether they have borders. – Oriol Aug 03 '15 at 14:49
  • I agree, the OP Maximillian Laurneidter a.k.a. The Qodesmith would not accept that. He has convinced himself that `box-sizing` is completely non-functioning in a flexbox environment, no matter what I showed him. I will totally avoid any questions having to do with @MaximillianLaumeister and @TheQodesmith in the future. – zer00ne Aug 15 '15 at 02:01
  • Dear @zer00ne, please note that I am not the OP (Qodesmith), I am just an editor, and therefore I am not notified when new answers are posted to this question. A few minutes ago when I got your previous chat message in my inbox, I was about to look at the new answer you provided, and if it worked, I was planning to upvote it. The screenshot you posted as a comment on your answer looked very promising, as it indeed showed the desired behavior. Before I could run your code, however, you deleted your answer. If your answer worked as you claim, then it's a shame that you decided to delete it. – Maximillian Laumeister Aug 15 '15 at 02:27
  • The proof was there then a long back and forth between you and I. It wouldn't be useful to anyone since I had to go from this to that trying show you what I meant. A waste of time I'm not going to repeat. – zer00ne Aug 15 '15 at 08:20
  • @zer00ne I still believe you have me confused with the OP. I don't remember any such back-and-forth - all I remember is posting one comment on your first answer saying that it didn't work for me, and one comment clarifying that I am not the OP. I still believe that if your second answer was correct (I didn't get the chance to see), then it would be useful to others with the same problem, and shouldn't have been deleted. As a side note, to reply to me (and not the OP, who is different), you will need to use the (@) notation to reply to my comment, so that it shows up in my inbox. – Maximillian Laumeister Aug 15 '15 at 19:54
  • 1
    @max, I thought the blog post you linked to was related to the actual OP question about flexbox+box-sizing, not the question about getting snippets in a post. Not that you can really edit it now, but just keep in mind for the future which question you are responding to, and for others, that blog isn't about flexbox+box-sizing... keep on lookin'. – coblr Jun 06 '16 at 21:28

1 Answers1

1

I think you need to define the height in order for the box-sizing to work.

I added height: 25.3%; in the following code, which means (300px-25px*2-10px*6)/((300px-25px*2)*3), and the code works.

http://jiayuanpulto.github.io/test/test_box-sizing.html

Benjamin W.
  • 46,058
  • 19
  • 106
  • 116
Jiayuan
  • 11
  • 3