Search code examples
csssafarimobile-safaribootstrap-4

Mobile Safari and Bootstrap 4 column content height 100% not honored

I am using Bootstrap 4 on my web page, which uses the bootstrap grid layout in flex mode.

In one of the columns I have a button that I want to fill the column. This is done by setting the button to 100% height using CSS.

This works without any problem in all browsers except Safari, where it seems to be ignored.

The html I'm using looks like this:

<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. In vulputate ipsum ut lorem commodo elementum. Cras finibus at mauris vel varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis felis turpis. Fusce blandit malesuada dolor, id gravida tortor cursus varius. In vulputate ipsum ut lorem commodo elementum. Cras finibus at mauris vel varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis felis turpis. Fusce blandit malesuada dolor, id gravida tortor cursus varius. In vulputate ipsum ut lorem commodo elementum. Cras finibus at mauris vel varius.
        </div>
        <div class="col-1">
            <button class="btn btn-primary" type="button">Lorem ipsum</button>
        </div>
    </div>
</div>

In addition to regular bootstrap code I have added the following css:

button { height: 100%; }

Here is an codepen example that shows the issue http://codepen.io/anon/pen/BppMvw

Does anyone have any suggestion on how to solve this? Since the other columns in the row may be of variable hight, it's not possible for me to set a fixed height. Javascript is not an option either.

Solution

  • A solution might be to set flex:1 on the button and make its parent a flex container. See here.