What doesn't flex-basis work?

<%= @topic_view.topic.title %>
<%= @topic_view.topic.average_rating %> <%= @topic_view.topic.posts.count { |p| !!p.custom_fields['rating'] } %>

I am trying to adjust the width of the button using flexbox but doesn’t do anything. Any help. thank you. link here: https://codepen.io/flickscode/pen/YzKZVYa

You have to provide the actual link to your pen. That just a link to an empty pen.

1 Like

I have updated it. Thank you.

I think your selector is wrong.
Instead of .main-nav:last-child, use button to select it.
It works fine when I selected it using element selector ‘button’.

And, there is no need for a div(main-nav) inside the nav element. I think that is also giving you the error.

Here,

nav {
  display: flex;
  flex-direction: column;
}

button {
  flex-basis: 100px;
}
1 Like

interesting because when I use .main-nav:last-child {width: 200px} it works just fine, it’s with flex-basis that it doesn’t.

It would be more helpful if its clear what you wanna do with flex-basis or with that button. I mean, do you wanna make it in the center, make it twice the size, make it take up the whole space ?

You may want to read the docs for :last-child.

But there is no need for a pseudo-class selector at all just use the descendant or child selector.

.main-nav button or .main-nav > button

Because you have set flex-direction to column you are in fact setting the height of the button, not its width. I will say flex-basis can be a bit confusing. I would suggest checking out this MDN article.

1 Like