Flex not respecting max-width

user_148496 0
Viewed 715

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?

  • You can be creative, but JS solutions is a no go for me here.
  • I know I can wrap elements to style them individually but I don't want to be required to add extra markup in the html.
  • At a later point I may have images etc that also don't follow the paragraph width. Therefore a long term less hacky solution is better.

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>

flexbox css html
4 Answers

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.

user_27419540

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.

user_35972760

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>

user_129257890

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;
}
user_32951010
Related