Width css property is not apply in items inside flex parent

Question

I am new in CSS and I want the buttons to be wider, they look very narrow, how can I achieve this? They should look like the container has no display flex

.container {
  display: flex;
  max-width: 300px;
  overflow-y: auto;
}

.container button {
  width: 500px
}

<div class="container">
  <button>Button #0</button>
  <button>Button #1</button>
  <button>Button #2</button>
  <button>Button #3</button>
  <button>Button #4</button>
  <button>Button #5</button>
</div>

You have a `max-width` on the container that's less than the `width` you have set on the buttons, so would be expected either way although not very responsive. What are you trying to make them look like? — Chris W., Dec 07 '21 at 04:08
I am trying to set a 500px width to the buttons but the changes are not showing — Husdady, Dec 07 '21 at 04:11

score 0 · Accepted Answer · answered Dec 07 '21 at 04:19

0

you have to use flex-shrink: 0 in button CSS.

.container {
  display: flex;
  max-width: 300px;
  overflow-y: auto;
}

.container button {
  width: 500px;
  flex-shrink: 0;
}

answered Dec 07 '21 at 04:19

Kartik Bhalala

390
1
10

Width css property is not apply in items inside flex parent

1 Answers1