css

This question already has an answer here:

Why does box-sizing: border-box still show the border with a width of 0px? 2 answers

---

你可以使用: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>

链接地址: http://www.djcxy.com/p/75598.html

上一篇: 为什么没有身高：0隐藏我填充的<div>，即使有框

下一篇: CSS