弹性盒框尺寸：边框不工作 [英] flex-box box-sizing: border-box not working

问题描述

正如标题所说：
$ b

.cnr {display：flex;身高：100％背景颜色：灰色;位置：绝对; border：1px red solid;}。cnr> div {box-sizing：border-box;填充：1em;边界：1em固体; overflow：hidden;}。cnr> .closed {width：0; flex-basis：0; flex-shrink：1; flex-grow：0;最小宽度：0; min-height：0;}

< div class = CNR > < DIV>打开< / div>< div class =closed>关闭< / div>< / div>

t使用宽度：0 来关闭第二个div，因为填充和边框。



什么？

我不知道我可以添加更多的细节。它是一个设置为 display：flex 的容器。每个Flex项目都有边框和填充以及一些（文本）内容。总共有2个。然后，其中一些将使用宽度：0关闭，并关闭边框和填充以及。 box-sizing：border-box is used。

但是它不起作用。谢谢。

编辑：好的，对不起，不能清楚地解释，但宽度需要动画，所以当动画播放时，填充需要在那里。如果可能的话，我想不要动画化填充。

解决方案

/ code>：

  .cnr> div {
 box-sizing：border-box; 
 overflow：hidden; 
} 
 
 .cnr> div：not（.closed）{
 border：1em solid; 
填充：1em; 
 
 
 
 $ b 
 
 
 
 <$ （'click'，function（）{$（this）.find（'div'）。toggleClass（'closed'）;}） 
  .cnr {display：flex;身高：100％背景颜色：灰色;位置：绝对; 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;最小宽度：0;最小高度：0; overflow：hidden;}  
 
 < script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =cnr> < DIV>打开< / div> < div class =closed>关闭< / div>< / div>  

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.

解决方案

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>

这篇关于弹性盒框尺寸：边框不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！