How do I prevent a parent element's width from affecting the child's width?

Question

I've got a

as a parent and a

as a child. The

is centered in the

and has a max-width of 650px and the

has a width of 800px.

Before, I had parenting the

and max-width worked as expected -- when there was a little text, the

would be pretty small. When there was a lot of text, the

width would go up to 650px and form a new line.
Now, with the

as a parent, the

seems to have an automatic max-width of half of the parent's width, which I don't want.

This code snippet includes a slider to adjust the parent's width. You'll notice that the

automatically changes size according to the parent, which is what I don't want. I want the

to have an independent width without explicitly setting it. I attempted to fix this using !important which had no effect (as expected, but it was worth a try).

document.querySelector("input").oninput = event => {
  document.querySelector("div").style.width = event.target.value + "px";
}

@import url("https://fonts.googleapis.com/css2?family=Cinzel&display=swap");
p {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  background-color: rgba(80, 80, 80, 0.75);
  text-align: center;
  font-size: 25px;
  max-width: 650px !important;
  width: auto !important;
}
div {
  position: absolute;
  background-color: #98765432;
  width: 1000px;
  height: 200px;
}


Lorem ipsum dolor sit amet, consectetur adipiscing elit.

One solution I might try is using Javascript and to calculate the width of the text I want to set and set the width that way. But, I was wondering if this could be done in CSS.

user_2939522 · Answer

the important piece of info here is that any block level elements will automatically take the full-width of their parent (until they hit the max-width if a value is provided).

this means, if your parent (div) is 600px, and the child (p) has 650px max-width, it will still take up the full 600px because that's less than the max-width it has defined, and because it's block level, it wants to take up the full width

another useful thing to keep in mind is, if your layout starts to get complex with lots of css rules, take a second and do a simplified version first (like the examples I have below) then build on top of that

you can do it like this:

div {
  border: 1px dashed #ddd;
  text-align: center;
}

p {
  max-width: 650px;
  display: inline-block;
  border: 1px dashed #ddd;
}


  
    text
  




  
    lots of text lots of text lots of text 
    lots of text lots of text lots of text 
    lots of text lots of text lots of text

or like this with flexbox

div {
  border: 1px dashed #ddd;
  display: flex;
  justify-content: center;
}

p {
  max-width: 650px;
  border: 1px dashed #ddd;
}


  
    text
  




  
    lots of text lots of text lots of text 
    lots of text lots of text lots of text 
    lots of text lots of text lots of text

How do I prevent a parent element's width from affecting the child's width?

1 Answers