0

When I set display: flex on my <a>, it looks just like I want:

.container {
  display: flex;
  box-sizing: content-box;
  flex-direction: row;
  align-items: center;
  border: 1px solid #333;
  background: white;
}

.firstchild {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 15px;
}

.firstgrandchild {
  display: inline-block;
}
  <a class="container">
    <span class="first">
      <span class="firstchild">First - child</span>
    </span>
    <p class="second">Second</p>
  </a>

Turning on Firefox's flexbox highlighter shows that it renders like I want: two items separated by a small margin, and the container growing to the full width on the right side:

The rendered elements highlighted using the flexbox highlighter

However, if I now change the <a> to be a <button>, it suddenly collapses, and the first grand child breaks out of the first child:

.container {
  display: flex;
  box-sizing: content-box;
  flex-direction: row;
  align-items: center;
  border: 1px solid #333;
  background: white;
}

.firstchild {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 15px;
}

.firstgrandchild {
  display: inline-block;
}
  <button class="container">
    <span class="firstchild">
      <span class="firstgrandchild">First child - first grand child</span>
    </span>
    <p class="secondchild">Second child</p>
  </button>

The rendered button element highlighted using the flexbox highlighter

Why does this happen? What styling do I need to add to the button to make it render the same as the anchor?

Vincent
  • 4,876
  • 3
  • 44
  • 55
  • You can't. Follow the dupe link for answer. – Asons Jan 03 '19 at 10:58
  • You can, by wrapping your button in a flex div and adding `flex:1` to your button for example. Or you can just change it's `width`. – Arkellys Jan 03 '19 at 11:00
  • @LGSon Are you sure the duplicate is up to date ? – Arkellys Jan 03 '19 at 11:03
  • @Arkellys Yes, for browsers that replicate that behavior, for the rest it will render as expected. And wrapping it in a `div` doesn't answer the question. – Asons Jan 03 '19 at 11:08
  • Thanks both. @Arkellys, I think the workaround mentioned there no longer works, but at least it's good to know that ` – Vincent Jan 03 '19 at 11:08
  • @Vincent And one more thing, it is not allowed to have a `p` as a child of a `button`, only _phrasing content_, like a `span`. Doing it could also render unexpected layout. – Asons Jan 03 '19 at 11:09
  • @LGSon Ah yes, I'm aware - this is the in-progress result of tinkering around :) – Vincent Jan 03 '19 at 11:11

0 Answers0