Center DIV with out DIV on ipad

[Andrew Poulos]

With this HTML

<div class="opt">
<div class="optnum">
<p>1.</p>
</div>
<div class="opttxt">
<p>Continue</p>
</div>
</div>

I have this CSS

.opt {
display: grid;
box-sizing: border-box;
position: relative;
overflow: hidden;
align-items: center;
grid-template-columns: min-content 1fr;
grid-column-gap:6px;
width: 10em;
overflow: hidden;
}
.optnum {
display:flex;
justify-content:center;
align-items: center;
width:2.4em;
height:2.4em;
}
.optnum p {
font-weight: bold;
}
.optTxt {
line-height: 2.5em;
border-radius: 8px;
}

On Windows, with Chrome and Firefox, the outer DIV is about 32px high
and the inner DIVs appear within it. With Safari on an ipad the outer
div is again about 32px but the inner DIVs are somewhere below the outer
DIV ie not visible.

How does the CSS need to change to get the inner DIVs to appear?

If I set a height for the outer DIV the inner DIVs appear but I'd need
to know the height of the inner DIVs to avoid cutting them off or having
too much space.

Andrew Poulos

[Andrew Poulos]

On 23/12/2020 9:34 am, Andrew Poulos wrote:
> With this HTML
>
> <div class="opt">
>   <div class="optnum">
>     <p>1.</p>
>   </div>
>   <div class="opttxt">
>     <p>Continue</p>
>   </div>
> </div>
>
> I have this CSS
>
> .opt {
>   display: grid;
>   box-sizing: border-box;
>   position: relative;
>   overflow: hidden;
>   align-items: center;
>   grid-template-columns: min-content 1fr;
>   grid-column-gap:6px;
>   width: 10em;
>   overflow: hidden;
> }

> On Windows, with Chrome and Firefox, the outer DIV is about 32px high
> and the inner DIVs appear within it. With Safari on an ipad  the outer
> div is again about 32px but the inner DIVs are somewhere below the outer
> DIV ie not visible.
>
> How does the CSS need to change to get the inner DIVs to appear?

I set

.opt {
grid-template-rows: min-content;
}

and the inner DIVs now appear correctly.

Andrew Poulos