text is shown in two line in flex display

Question

I have a text inside of div , the div has 100% width , I want to have the text in one line rest of the div fills up with middle line till end of the row

 .question-category-sub {    
      display: flex;
    }

    .lineHorizontal__container {
        align-items: center;
        display: flex;
        height: 80px;
    }

    .lineHorizontal {
       border-top: 1px solid rgb(30, 30, 30);
       width: 100%;
     }

 <div class="lineHorizontal__container">
          <div class=" question-category-sub">
              Art - Music
          </div>
          <div class="lineHorizontal">                 
          </div>                  
       </div>

   <div class="lineHorizontal__container">
      <div class=" question-category-sub">
          Art - Music
      </div>
      <div class="lineHorizontal">                 
      </div>                  
   </div>

   .question-category-sub {    
  display: flex;
  }

.lineHorizontal__container {
    align-items: center;
    display: flex;
    height: 80px;
}

.lineHorizontal {
   border-top: 1px solid rgb(30, 30, 30);
   width: 100%;
 }

but Art - music are shown in two lines how can I make Art-Music and the middle line (which should be extended to end of row) in one line. and I should add the text "Art-Music" is dynamic, so it has the dynamic length

replace width: 100% by flex:1 – Temani Afif Oct 15 '22 at 08:29 — Temani Afif, Oct 15 '22 at 08:29

score 1 · Accepted Answer · answered Oct 15 '22 at 08:20

1

You should add flex-shrink of 0 to your question-category-sub:

.question-category-sub{
    flex-shrink: 0;
}

answered Oct 15 '22 at 08:20

N.SH

616
7
20

score -1 · Answer 2 · answered Oct 15 '22 at 08:29

-1

use flex-shrink property to

.question-category-sub {
  display: flex;
  flex-shrink: 0;
}

answered Oct 15 '22 at 08:29

Chamidu Purage

83
5

text is shown in two line in flex display

2 Answers2