button with display:block not stretched

Question

Consider the following HTML code:

<!DOCTYPE html>
<html>
<head>
    <title>TEST</title>
    <style>
        button {
            display: block;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div style="width: 100px; border: 1px solid black">
        <button>hello</button>
        <button>hi</button>
    </div>
</body>
</html>

My question is why buttons don't stretch to 100% width if their display is block. How to achieve this? I can't set style of buttons to width: 100% because they would overflow their parent block because of the margin.

have you added position:relative; and then added width:100% ? — mas-designs, Mar 14 '12 at 09:26
possible duplicate of [input with display:block is not a block, why not?](http://stackoverflow.com/questions/1030793/input-with-displayblock-is-not-a-block-why-not) — Qtax, Mar 14 '12 at 09:36
Qtax: `box-sizing: border-box` hasn't worked for me. Don't know why. — Martin Ždila, Mar 14 '12 at 09:42
I realise the above is just an example, but you have an error in your DOCTYPE declaration. — Mr Lister, Mar 14 '12 at 09:53

彼術向 · Answer 1 · 2020-04-18T03:08:15.677

24

The initial defination of Button Layout was committed on 2019, which solved the rendering problem of button elements. https://github.com/whatwg/html/pull/4143.

we could refer to the HTML Living Standard to see an important rule of Button Layout as follows:

If the computed value of 'inline-size' is 'auto', then the used value is the fit-content inline size.

https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size

we should know that a block with inline-size:fit-content | max-content | min-content will shrink its width even if display:block.(by the way, width:fit-content | max-content | min-content does the same effect)

try this (require chrome 57+, but in FireFox 66+ we could try with inline-size:max-content):

<div style="
  inline-size: fit-content;
  background: linear-gradient(0deg, #ddd, #fff);
  padding: 2px 6px;
  border: 0.5px solid #bbb;
  font-size: 13px;"
>click me!</div>

view result

edited Apr 18 '20 at 03:08

answered Jan 31 '20 at 09:28

彼術向

341
2
4

1

This should be the selected answer! – camilokawerin Jun 30 '22 at 19:41
According to the Chrome devtools, the computed value of a vexing button's `inline-size` is that of its width, not `auto`. So why the quoted rule is still applied here? – Ilya Loskutov Jan 09 '23 at 11:52
It wasn't super clear from this answer, but the solution for me was `inline-size: 100%` – James Nisbet Feb 05 '23 at 02:30

score 10 · Accepted Answer · answered Mar 14 '12 at 09:35

10

You can add padding to div container, and remove horizontal margin from buttons. Then you can apply width 100% to them:

<!DOCTYPE>
<html>
<head>
    <title>TEST</title>
    <style>
        button {
            display: block;
            width:100%;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div style="width: 100px; border: 1px solid black; padding:0 10px;">
        <button>hello</button>
        <button>hi</button>
    </div>
</body>
</html>

Demo: http://jsfiddle.net/xwt9T/1/

answered Mar 14 '12 at 09:35

welldan97

3,071
2
24
28

I would suggest using box-sizing: border-box, to keep button padding inside that 100% – FrancescoMM Jun 22 '16 at 22:41
This is just a workaround. The correct answer to the question "why buttons don't stretch to 100% width" is the one from 彼術向 bellow this. – camilokawerin Jun 30 '22 at 19:43

score 0 · Answer 3 · answered Mar 14 '12 at 09:37

0

Try with this ,

<div style="width: 100px; border: 1px solid black">
    <button style="width:100%; float: left;margin-left:0px;">hello</button>
    <button>hi</button>
</div>

answered Mar 14 '12 at 09:37

rejo

3,352
5
27
34

score -3 · Answer 4 · answered Apr 27 '17 at 13:39

-3

flex-grow: 1 will produce the expected behavior.

answered Apr 27 '17 at 13:39

br4nnigan

646
6
13

@SephReed I cannot reproduce OPs behavior now, button always stretches for me (Firefox, Chrome, IE11). What's your setup? – br4nnigan Jul 24 '19 at 08:42
Brave, so same thing. Inversely related: https://stackoverflow.com/questions/57154038/can-i-make-a-div-shrink-to-text-width-like-a-button – Seph Reed Jul 24 '19 at 18:48

button with display:block not stretched

4 Answers4

Linked

Related