How can I make button auto width to its parent div

Question

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 class="drp">
  <button class="drp-btn" id="i-drp-btn">m/s</button>
  <div id="i-speed-drp" class="drp-content">
    <button class="drp-btn-elem" value="m/s">m/s</button>
    <button class="drp-btn-elem" value="km/h">km/h</button>
  </div>
</div>

Please add your CSS to the demo I created. See [ask] for tips. — isherwood, Sep 27 '22 at 16:14
Does this answer your question? [Make a button fill the full width of container element?](https://stackoverflow.com/questions/30558184/make-a-button-fill-the-full-width-of-container-element) — isherwood, Sep 27 '22 at 16:22

score 0 · Accepted Answer · answered Sep 27 '22 at 16:14

0

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.

answered Sep 27 '22 at 16:14

Max

64
5

Oh yeah. Thank you so much! I am so dumb, sry, just got into html/css. – Sep 27 '22 at 16:17
1

Don't worry, we all started somewhere ;) – Max Sep 27 '22 at 16:20

score 0 · Answer 2 · answered Sep 27 '22 at 16:19

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 class="drp">
    <button class="drp-btn" id="i-drp-btn">m/s</button>
    <div id="i-speed-drp" class="drp-content">
        <button class="drp-btn-elem" value="m/s">m/s</button>
        <button class="drp-btn-elem" value="km/h">km/h</button>
    </div>
</div>
</body>
</html>

score 0 · Answer 3 · edited Sep 27 '22 at 16:22

0

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

edited Sep 27 '22 at 16:22

isherwood

58,414
16
114
157

answered Sep 27 '22 at 16:21

EST-TQ

34
2

Please ask for clarification with a comment, not in your answer. – isherwood Sep 27 '22 at 16:23

How can I make button auto width to its parent div

3 Answers3