0

I have a header where on the left side there is header name and on the right side, there are a few buttons. And the problem is, header name splits into two lines at last white space. I have below code and it's happening because of .right class's width set to inherit. pls refer the code. Is there any way for not letting the text to split?

.parent {
  width: 100%;
  height: auto;
  display: flex;
  padding: 0.5rem 1rem;
}

.right {
  text-align: right;
  width: inherit;
}
<div class="parent">
  <!---->
  <h6>A B C D E</h6>
  <div class="right">
    buttons
  </div>
</div>

JSFiddle

Nick Parsons
  • 45,728
  • 6
  • 46
  • 64
Ajeet Eppakayala
  • 1,186
  • 1
  • 10
  • 17

4 Answers4

1

You can simplify the code by assigning flex-grow: 1 to the h6 (the header name). This will have ensure the text grows to fill the most available space in the row. The remaining space will be implicitly given to .right (buttons).

/* default styles */
.parent {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;  
}

.parent h6 {
  flex-grow: 1;
}
<div class="parent">
  <h6>A B C D E</h6>
  <div class="right">
    buttons
  </div>
</div>

jsFiddle

Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61
1

You could use justify-content: space-between to evenly distribute your two items within the parent container like so: 

.parent {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
<div class="parent">
  <h6>A B C D E</h6>
  <div class="right">
    buttons
  </div>
</div>
Nick Parsons
  • 45,728
  • 6
  • 46
  • 64
0

You can use flex-shrink property to achieve what you wanted. I have remove width:inherit and used flex-grow property. I assume that would be better in this case.

flex-grow defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).

.parent {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
}

.right {
  text-align: right;
  flex-shrink: 0;
  flex-grow: 1;
}

h6 {
  flex-shrink: 0;
}
<div class="parent">
  <!---->
  <h6>A B C D E</h6>
  <div class="right">
    buttons
  </div>
</div>
Community
  • 1
  • 1
Soothran
  • 1,233
  • 4
  • 14
0

remove width: inherit from right class and add margin-left:auto to align it to the right

adel
  • 3,436
  • 1
  • 7
  • 20