Different representation of valid HTML 5 code in Firefox and Chrome

Question

The following code displays differently in Chrome and Firefox:

#category-chooser {
  width: 600px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="btn-group-vertical" id="category-chooser">
	<div class="btn-group btn-group-justified" data-toggle="buttons">
		<div class="btn-group">
			<button class="btn btn-default">
				a lot of content... foo bar foo bar
			</button>
		</div>
		<div class="btn-group" role="group" id="choose-furniture">
			<button class="btn btn-default">
				short
			</button>
		</div>
	</div>
	<div class="btn-group btn-group-justified" data-toggle="buttons">
		<div class="btn-group">
			<button class="btn btn-default">
				short
			</button>
		</div>
		<div class="btn-group">
			<button class="btn btn-default">
				a lot of content... foo bar foo bar
			</button>
		</div>
	</div>
</div>

The bootstrap classes seem to do something strange here. However, on the bootstrap page, the example seems to work fine across browsers.

In Chrome, the "columns" are spaced out proportionally to the content. In Firefox, all columns have the same width.

Answer 1

btn-group-justified makes use of display: table, however that CSS is overridden by btn-group-vertical to display: block. I guess browsers handle btn-group (display: table-cell) differently when the parent container does not display as table.

Your codes look fine, the Bootstrap sample does not show mixed use of btn-group-vertical and btn-group-justified. I believe it is the limitation not described.

I would suggest removing btn-group-vertical and adjust the border-radius yourself.