flex-box box-sizing: border-box not working

Question

As title says:

.cnr{
  display: flex;
  height: 100%;
  background-color: grey;
  position: absolute;
  border: 1px red solid;
}
.cnr > div{
  box-sizing: border-box;
  padding: 1em;
  border: 1em solid;
  overflow: hidden;
}
.cnr > .closed{
  width: 0;
  flex-basis: 0;
  flex-shrink: 1;
  flex-grow:   0;
  min-width:   0;
  min-height:  0;
}

<div class="cnr">
  <div>
    open
  </div><div class="closed">
    closed
  </div>
</div>

Can't closed the second div using width: 0 because of padding and border.

What do?

I don't know what more details can I add. It's a container set to display: flex. Each flex item has a border and padding and some (text) content. There are 2 of them in total. Then some of them will be closed using width: 0, and to closed the border and padding as well. box-sizing: border-box is used.

But it doesn't work. Thank you.

Edit: ok, sorry for not explaining clearly, but width needs to be animated, that's why the padding needs to be there when the animation is playing, and I would like to not animate the padding as well if possible.

change your selector for `.closed` to `.cnr > .closed` and add `padding: 0;`? — Michael Coker, May 24 '17 at 23:12
I can't, because I want to animate the width. And using `display: none` doesn't fix `box-sizing` not working... — BigName, May 24 '17 at 23:25
`padding: 0` is an option, but I want my animation to not change padding if possible. — BigName, May 24 '17 at 23:33
Ok, sorry for the duplicate. I just assumed the problem was caused by flex-box. Looks like it's the box-sizing and padding. — BigName, May 25 '17 at 03:08
You could add an extra wrapper to animate the width: https://jsfiddle.net/ucc4sa97/2/ — Asons, May 25 '17 at 06:53

Dalin Huang · Accepted Answer · 2017-05-25T00:13:21.320

you could use :not:

.cnr>div{
  box-sizing: border-box;
  overflow: hidden;
}

.cnr>div:not(.closed) {
  border: 1em solid;
  padding: 1em;
}

$('.cnr').on('click', function(){
  $(this).find('div').toggleClass('closed');
})

.cnr {
  display: flex;
  height: 100%;
  background-color: grey;
  position: absolute;
  border: 1px red solid;
}

.cnr>div{
  box-sizing: border-box;
  overflow: hidden;
}

.cnr>div:not(.closed) {
  border: 1em solid;
  padding: 1em;
}

.cnr>.closed {
  width: 0;
  flex-basis: 0;
  flex-shrink: 1;
  flex-grow: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cnr">
  <div>
    open
  </div>
  <div class="closed">
    closed
  </div>
</div>

Might be worth separating the padding property to be the only one within the `.cnr>div:not(.closed)` selector, and still having the `overflow`, `border` and `box-sizing` within the original selector, just incase there's ever a time where the closed one still needs access to those properties. — Sam Willis, May 24 '17 at 23:46

flex-box box-sizing: border-box not working

1 Answers1

Linked