显示:柔性;显示元素不一致

Question

我创建了这个具有以下标记的 Plunker：

  <div class="row-fluid">
    <div class="span12">
      <div class="block-group" draggable="true" style="position: relative;">
        <div class="block-operator">And</div>
        <div class="block-children">
          <div class="block-group" draggable="true" style="position: relative;">
            <div class="block-operator">And</div>
            <div class="block-children">
              <div class="block-container" style="position: relative;"></div>
              <br>
              <div class="block-container" style="position: relative;"></div>
            </div>
          </div>
          <br>
          <div class="block-container" style="position: relative;"></div>
        </div>
      </div>
    </div>
  </div>

CSS 包括以下内容：

.block-group {
    align-items: center;
    border: 1px solid #999;
    display: flex!important;
    padding: 5px 10px;
    position: relative;
}

从预览中可以看出，您可以嵌套 AND 块。 在演示中，子 AND 块不占用容器的整个宽度，但父块占据了容器的整个宽度。 我希望所有 AND 块的宽度(由边框指示(仅占用所需的空间。 如何使父 AND 块占用整个宽度？

Answer 1

你可以display它作为inline-flex，那么它只会取内容宽度：

.block-group {
    align-items: center;
    border: 1px solid #999;
    display: inline-flex !important;
    padding: 5px 10px;
    position: relative;
}