CODEWITHSUNDEEP
htmlcssflexbox
mellis481
mellis481

Reputation: 4168

display: flex; inconsistently displaying elements

I've created this Plunker that has the following markup:

  <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 includes the following: 

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

As you can see from the preview, you can nest AND blocks. In the demo, the child AND block does not take up the full width of the container, but the parent does. I would like for the width of all AND blocks, indicated by the border, to only take up the required space. How can I make the parent AND block from taking up the full width?

Upvotes: 0

Views: 33

Answers (1)

VXp
VXp

Reputation: 12078

You can display it as inline-flex, then it will only take the contents width:

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

Upvotes: 1

Related Questions