How to set the height of the <span> height of the content? They write a lot about how to stretch it to the height of the parent, but little about how to content.

enter image description here

In my example (link to jsfiddle ) the span is inside flex , but it was the same inside table-cell .

    1 answer 1

    By default, descendants of a parent whose display: flex; is set to display: flex; stretched by its height. If there is a need to do otherwise, it is necessary to set the parent's align-items: flex-start / center; property align-items: flex-start / center; .

     div { display: flex; justify-content: space-between; background-color: green; height: 50px; padding: 5px 10px; align-items: center; } .title { background-color: red; } .shortcut_hint { font-family: Consolas, sans-serif; font-size: 50%; background-color: #003366; color:#ffffff; padding: 2px 5px; border-radius: 2px; } 
     <div> <span class="title">Title</span> <span class="shortcut_hint">Ctrl+1</span> </div>

    • Thank you for your reply! And how should it be if the span is inside, for example, a table-cell, and floated to the right? It also stretches in height, but here the reason will be different. - Bokov Gleb
    • Can you provide the code? So far, I do not really understand what I mean. - Sasha Omelchenko
    • I tried to rewrite my code in a simplified version - everything turned out . We still have a lot of time to look for the cause in the project. - Bokov Gleb