Question

我在嵌套的flexbox中有内联块的奇怪行为。这种情况发生在Chrome中。

我使用绿色块作为间距，嵌套.row需要显示/隐藏所有内容（内容，如果从中移除display:flex（或.row） - .spacer不行。

有人可以帮忙吗？

overlapped blocks

body {
  font-size: 20px;
  width: 50%;
}

.row {
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
}

.spacer {
  flex: 0 0 15px;
  text-align: center;
  background-color: #AEA;
}

.flex {
  flex: 1;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
  <body>
    <div class="row">
      <span>label</span>
      <span class="spacer">|</span>
      <div class="row">
        <i class="fa fa-clock-o"></i>
        <span>date</span>
        <span class="spacer"></span>
        <span>date2</span>
      </div>
      <span class="flex"></span>
      <span class="fa fa-arrow-down"></span>
    </div>
  </body>

嵌入式块在Chrome中与flexbox重叠

0 个答案: