How can I make button auto width to its parent div-CodePudding

I can't make a button auto its width to the parent div it is a child of. How do I make that?

See the problem in action .

Here is the code (html structure) if you need it:

<div >
  <button  id="i-drp-btn">m/s</button>
  <div id="i-speed-drp" >
    <button  value="m/s">m/s</button>
    <button  value="km/h">km/h</button>
  </div>
</div>

CodePudding user response：

Did you try width: 100% on your button style? It should take the size of the parent, except if you have margin defined on your parent or padding defined on your button.

CodePudding user response：

If what you want is to make all buttons of that class use 100% of the width, then you should add that in the CSS code by adding this line:

.drp-btn-elem{width: 100%}

Here's a snipet:

.drp-btn-elem{width: 100%}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div >
    <button  id="i-drp-btn">m/s</button>
    <div id="i-speed-drp" >
        <button  value="m/s">m/s</button>
        <button  value="km/h">km/h</button>
    </div>
</div>
</body>
</html>

CodePudding user response：

If you want the button width full width of parent div, you can add width: 100% for button