I have incorporated Bootstrap 4 into my website's design, specifically utilizing the bootstrap grid layout in flex mode.
Within one of the columns, I have placed a button that I desire to fill the entire column width. I have achieved this by setting the button's height to 100% using CSS.
While this method works seamlessly on most browsers, Safari seems to ignore this setting.
Below is the HTML structure I've implemented:
<div class="container">
<div class="row">
<div class="col-10">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis felis turpis. Fusce blandit malesuada dolor, id gravida tortor cursus varius. [...] varius.
</div>
<div class="col-1">
<button class="btn btn-primary" type="button">Lorem ipsum</button>
</div>
</div>
</div>
In addition to the standard bootstrap code, I have included the following CSS snippet:
button { height: 100%; }
For a demonstration of the issue, you can refer to this CodePen example http://codepen.io/anon/pen/BppMvw
Any suggestions on how to address this problem are welcome. Due to the variable heights of other columns in the row, setting a fixed height is not feasible, and using JavaScript is not an option.