22

I would like to have the flex children rendered inline-block so that border-bottom is under the li's width instead of the container's width.

Apparently flex children can't be set as inline-block?

Is there a workaround to this problem?

.menu {
  display: flex;
  flex-flow: column;
  list-style: none;
  padding: 0;
}
.menu > li {
  display: inline-block;
  margin-bottom: 1rem;
  border-bottom: 3px solid black;
}
<ul class="menu">
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

https://codepen.io/joshuajazleung/pen/EbwZmJ

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Joshua Leung
  • 2,219
  • 7
  • 29
  • 52
  • If you set it as inline-block then it will no longer be flex. Your question makes no sense written like that. – Rob Nov 16 '17 at 02:13
  • 1
    @Rob If to set `inline-block` to a _flex item_ won't make it _"no longer be flex"_, though it won't give the expected result. – Asons Nov 16 '17 at 08:18

1 Answers1

46

Add align-items: flex-start to the container:

.menu {
  display: flex;
  flex-flow: column;
  align-items: flex-start; /* NEW */
  list-style: none;
  padding: 0;
}
.menu > li {
  margin-bottom: 1rem;
  border-bottom: 3px solid black;
}
<ul class="menu">
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

OR... switch from display: flex to display: inline-flex.

.menu {
  display: inline-flex;
  flex-flow: column;
  list-style: none;
  padding: 0;
}
.menu > li {
  margin-bottom: 1rem;
  border-bottom: 3px solid black;
}
<ul class="menu">
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

More details here: Make flex items take content width, not width of parent container

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 2
    Excellent demonstration of how to use flex! No need for any extra mark-up. – Marc Audet Nov 16 '17 at 02:26
  • 1
    Very good use of flex, I encountered an identical problem today where I have to inline a flex-child. In that case, I used align-self: flex-start property. – Noor Muhammad Aug 24 '21 at 08:15