skyboyer skyboyer - 7 months ago 11
HTML Question

nested flex elements don't make parent grow

I'm trying to compose a header with month names and all days in that month right below the name.

Days items have fixed width so I thought: why not use flexbox?

For some reasons

.day
elements are falling of their parent and parent does not grow.

Could you please give me a hint why
flex-basis: auto
doesn't make month-slot grow after days' slot overflow it?

As for implementation I've already found workaround with using
float: left
instead of using flexbox. But I cannot understand why it works this way.



.main {
display: flex;
}

.month {
flex: 0 0 auto;
}

.days {
display: flex;
}

.day {
flex: 0 0 2em;
}

<div class='main'>
<div class='month'>
<div class='name'>Jan</div>
<div class='days'>
<div class='day'>1</div>
<div class='day'>2</div>
<div class='day'>3</div>
<div class='day'>4</div>
<div class='day'>5</div>
<div class='day'>6</div>
</div>
</div>
<div class='month'>
<div class='name'>Feb</div>
<div class='days'>
<div class='day'>1</div>
<div class='day'>2</div>
<div class='day'>3</div>
<div class='day'>4</div>
<div class='day'>5</div>
<div class='day'>6</div>
<div class='day'>7</div>
<div class='day'>8</div>
<div class='day'>9</div>
<div class='day'>10</div>
</div>
</div>
<div class='month'>
<div class='name'>Mar</div>
<div class='days'>
<div class='day'>1</div>
<div class='day'>2</div>
</div>
</div>
</div>





codepen: http://codepen.io/skyboyer/pen/MyzeLW

jsFiddle: https://jsfiddle.net/azizn/ytt7jb85/

Answer

Use width: 2em instead of flex: 0 0 2em.

.main {
  display: flex;
}
.month {
  flex: 0 0 auto;
}
.days {
  display: flex;
}
.day {
  width: 2em;
}
<div class='main'>
  <div class='month'>
    <div class='name'>Jan</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
      <div class='day'>3</div>
      <div class='day'>4</div>
      <div class='day'>5</div>
      <div class='day'>6</div>
    </div>
  </div>
  <div class='month'>
    <div class='name'>Feb</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
      <div class='day'>3</div>
      <div class='day'>4</div>
      <div class='day'>5</div>
      <div class='day'>6</div>
      <div class='day'>7</div>
      <div class='day'>8</div>
      <div class='day'>9</div>
      <div class='day'>10</div>
    </div>
  </div>
  <div class='month'>
    <div class='name'>Mar</div>
    <div class='days'>
      <div class='day'>1</div>
      <div class='day'>2</div>
    </div>
  </div>
</div>

Comments