Fixed width child is shrinking in flexbox [duplicate]

Question

I'm using display:flex for the first time.

You find a codepen here: https://codepen.io/chrispillen/pen/GEYpRg

.node:not(.branch) {
  width: auto;
  height: 100px;
  background: red;
  margin-bottom: 1px;
}

.node.branch,
.node.branch .body {
  width: auto;
  overflow: hidden;
}

.node.branch .leaf {
  width: 100%;
  height: 100px;
  background: blue;
}

.node.branch .body {
  width: 100%;
  display: flex;
  align-items: stretch;
}

.node.branch .body .tribe {
  width: 100px;
  background: blue;
  margin-right: 1px;
}

.node.branch .body .subnodes {
  padding-top: 1px;
  width: 100%;
  overflow: hidden;
}

<div class="node"></div>
<div class="node branch">
  <div class="leaf"></div>
  <div class="body">
    <div class="tribe">TRIBE</div>
    <div class="subnodes">
      <div class="node"></div>
      <div class="node"></div>
    </div>
  </div>
  <div class="leaf"></div>
</div>

The "tribe" element doesn't remain with a width of 100px.

Everything else works as supposed. Can I force it somehow? And by the way: is flex the true reason for this behavior?

See this section The flex-shrink factor in this answer. — Michael Benjamin
– Michael Benjamin, Commented Jul 8, 2017 at 14:48

Vadim Ovchinnikov · Accepted Answer · 2017-07-08 16:14:05Z

Flexbox items have flex-shrink parameter with default of 1. This means that in case your flexbox container don't have enough space its items will shrink.

To disable this behaviour for flexbox item set flex-shrink: 0.

Demo:

.node:not(.branch) {
  width: auto;
  height: 100px;
  background: red;
  margin-bottom: 1px;
}

.node.branch,
.node.branch .body {
  width: auto;
  overflow: hidden;
}

.node.branch .leaf {
  width: 100%;
  height: 100px;
  background: blue;
}

.node.branch .body {
  width: 100%;
  display: flex;
  align-items: stretch;
}

.node.branch .body .tribe {
  width: 100px;
  flex-shrink: 0; /* new */
  background: blue;
  margin-right: 1px;
}

.node.branch .body .subnodes {
  padding-top: 1px;
  width: 100%;
  overflow: hidden;
}

<div class="node"></div>

<div class="node branch">
  <div class="leaf"></div>

  <div class="body">
    <div class="tribe">TRIBE</div>

    <div class="subnodes">
      <div class="node"></div>
      <div class="node"></div>
    </div>
  </div>
  
  <div class="leaf"></div>
</div>

Collectives™ on Stack Overflow

Fixed width child is shrinking in flexbox [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related