limit the width of an h1 element to its parent

Asked Nov 12 '19 at 22:25

Active Nov 12 '19 at 22:38

Viewed 24 times

I want to limit the width of the hd but without having to set a width. I want it to occupy the full available width (width of the parent?)

.wrapper {
  outline: 1px #000 solid;
  width: 600px;
  margin: auto;
  display: flex;
}

.left {
  flex-grow: 1
}

.left h1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.right {
  width: 200px;
  background-color: #CCC;
}

<div class="wrapper">
  <div class="left">
    <h1>this is a really really really long heading</h1>
  </div>
  <div class="right">right</div>
</div>

edited Nov 12 '19 at 22:38

Temani Afif

245,468
26
309
415

asked Nov 12 '19 at 22:25

handsome

2,335
7
45
73

so you want the font to fill the complete line? – Dhaval Jardosh Nov 12 '19 at 22:34
Have you tried width:100% – Ajith Nov 12 '19 at 22:34
1

`min-width: 0;` to left element – Temani Afif Nov 12 '19 at 22:35
don't add the answer into the question. The question need to remain a question and show the initial issue – Temani Afif Nov 12 '19 at 22:38
If I understand your question correctly, you can solve it by adding `overflow: hidden` to `.left` – L. Männer Nov 12 '19 at 22:40
yeah sorry was testing in the snipper. min-width: 0 fixed my problem. thank you. – handsome Nov 12 '19 at 22:43

limit the width of an h1 element to its parent

0 Answers0