0

I want to select css class.
But My code is not working.
Below is the code. I want to change width of button.
But the selector of CSS does'nt work. How should I use css selector in this case..

 .vendor {
      display: flex;
    }
    
    .vendor .vendor-btn {
      width: 500px;
    }
<body>
        <div class="vendor">
          <button class="vendor-btn btn-primary">Hello</button>
          <input class="vendor-input" type="text" />
        </div>
      </body>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
DD DD
  • 1,148
  • 1
  • 10
  • 33

1 Answers1

4

Child elements of a row flex parent that don't have flex-basis specified will use the width value for flex-basis and the width property will then behave like it's ignored (as the element will no-longer have a fixed width value).

You can see this in the snippet in your post:

  1. Click "Run code snippet"
  2. Observe that the child element does have a visual width of 500px.
  3. Click the Full Page link.
  4. Observe that the child element still has a visual width of 500px.
  5. Make the browser window narrower than 500px
  6. Observe that the child element is now narrower than 500px:

enter image description here

If you want the flex children to always be exactly 500px then set flex-shrink: 0; and flex-grow: 0 (so they have minimal priority to grow or shrink and will retain the flex-basis (via width) of 500px).

Dai
  • 141,631
  • 28
  • 261
  • 374
  • width did work for me, there were may cases where i had parent container display:flex and child had width and it did work . According to this https://gedd.ski/post/the-difference-between-width-and-flex-basis/ ,if there is no flex-basis then it takes width – Geeky Mar 13 '19 at 05:06
  • As you can see now in OPs code snippet: width is NOT ignored on the flex child. – Olafant Mar 13 '19 at 05:24
  • @Olafant Thank you for the feedback. I've updated my answer. – Dai Mar 13 '19 at 06:26