Caret not Vertical Centering with Empty Content and Display Flex [duplicate]

Question

I'm using Display flex on a couple DIVs. I'm vertically centring the inner DIV text content. It centres correctly however when i click within the content editable inner DIV while there is no content i can see the caret begins at the top left (for Chrome) or bottom left (for FF). When i begin to type the caret and contents jump to center. As long as there is content the caret is centered fine but when there is no content the caret begins at top (or bottom). What gives?

CodePen Example

HTML

<div id="input_area">
  <div id="inner" class="content" contenteditable="true" data-hint="Click Here and Type"></div>
</div>

CSS

#input_area 
{
    background-color: yellow;
    display: flex;
    overflow-y:auto;
    max-height:300px;
    min-height:4em;
    cursor:auto;
}

#input_area > div.content 
{
    width: 100%;
    display:flex;
    align-items:center;
}

#input_area .content[contentEditable=true]:empty:not(:focus):before 
{
    content: attr(data-hint);
    color: #aaaaaa;
}

Hardandfast

did u ever find a solution to this? such bizarre behaviour – Arbitrator

Answer 1

Try this

#input_area > div.content {
width: 100%;
display:flex;
align-items:center;
margin:auto;
outline:none
}

Hallway

When the DIV is not focused i still want the cursor to show the caret icon when i hover over any part of the yellow area PLUS i still want to be able to click anywhere in the yellow area to give focus. With the provided solution i am able to see the caret and click on the DIV only at the vertical centre (1 character height) as opposed to my original which allowed me to see and click anywhere. – Hardandfast

I figure adding: #input_area .content[contentEditable=true]:empty:focus { padding-top: 20px; } but i'm trying to have the caret centered as opposed to an arbitrary px – Hardandfast