CODEWITHSUNDEEP
htmlcssflexbox
Jens Törnell
Jens Törnell

Reputation: 24768

Flex not respecting max-width

I have a chunk of text. My headlines should go wider than the paragraph text. To make that possible I use max-width. The first problem is that my single word paragraph is centered. I fix it by using width but as soon as I do that max-width no longer applies. Why is that? How can I fix it?

Example

You need to try it on a mobile. The paragraph then refuses to scale down but keeps itself to 640px.

.text {
  width: 840px;
  background: #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  max-width: 640px;
  text-align: center;
}

p {
  max-width: 400px;
  width: 400px;
  /* To prevent the one word to be centered */
}
<div class="text">
  <h1>
    A really very long headline indeed, to tell a story
  </h1>
  <p>
    Soufflé sesame snaps tart chocolate chupa chups candy canes jujubes. Sweet brownie cheesecake tootsie roll donut bear claw macaroon brownie jelly. Cake toffee lollipop lollipop fruitcake caramels carrot cake gingerbread chocolate. Cotton candy powder
    tiramisu liquorice brownie lemon drops pastry.
  </p>
  <p>
    One word.
  </p>
</div>

Upvotes: 3

Views: 1320

Answers (4)

Mahatmasamatman
Mahatmasamatman

Reputation: 1535

You can achieve what you are looking for with just CSS, without having to add extra HTML markup.

JSfiddle: https://jsfiddle.net/x8qgtpd7/

.text {
  background: #eee;
}
h1{
  padding: 0px 5vw;
  text-align: center;
}
p{
  padding: 0px 15vw;
  max-width: 500px;
  margin: auto;
}
<div class="text">
  <h1>
    A really very long headline indeed, to tell a story
  </h1>
  <p>
    Soufflé sesame snaps tart chocolate chupa chups candy canes jujubes. Sweet brownie cheesecake tootsie roll donut bear claw macaroon brownie jelly. Cake toffee lollipop lollipop fruitcake caramels carrot cake gingerbread chocolate. Cotton candy powder
    tiramisu liquorice brownie lemon drops pastry.
  </p>
  <p>
    One word.
  </p>
</div>

Upvotes: 0

NevNein
NevNein

Reputation: 547

You actually want the p to expand when it has the space to expand, but also you want it to shrink when it doesn't.

So the point is that you don't want to use min-width because that forces p to be of that width even when it has no space, as intended.

Instead you should tell the p to adapt to the space it has, but only up to 400px. That is achieved with max-width.

The code:

p {
  max-width: 100%;
  width: 400px;
}

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371221

I fix it by using width but as soon as I do that max-width no longer applies. Why is that? How can I fix it?

Why is that?

Because you have align-items: center on the container. In a column-direction container, that horizontally centers flex items.

The centering starts from the middle and works its way out equally on both sides. So when you use max-width with short content the text will appear centered underneath the bigger paragraph above.

But when you use width: 400px, the item is as long as the full length paragraph above and the content, by default, aligns left. (If you set the p to text-align: center, then your experiment would fail with or without width: 400px.)

.text {
  width: 840px;
  background: #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  max-width: 640px;
  text-align: center;
  border: 1px dashed red;
}

p {
  width: 400px;
  text-align: center;
  border: 1px dashed red;
}
<div class="text">
  <h1>
    A really very long headline indeed, to tell a story
  </h1>

  <p>
    Soufflé sesame snaps tart chocolate chupa chups candy canes jujubes. Sweet brownie cheesecake tootsie roll donut bear claw macaroon brownie jelly. Cake toffee lollipop lollipop fruitcake caramels carrot cake gingerbread chocolate. Cotton candy powder
    tiramisu liquorice brownie lemon drops pastry.
  </p>

  <p>
    One word.
  </p>
</div>

How can I fix it?

Without JS or additional HTML containers I'm not sure it's possible because there's no left alignment for the paragraphs. They're just centering based on the length of their content up to the maximum width.

Upvotes: 1

Simon Brahan
Simon Brahan

Reputation: 2076

Surround your <p> tags in a <div>. The centering is then applied to that div, and you can align your <p> tags as you like. Fiddle here.

Upvotes: 1

Related Questions