Css prevent child from expanding parent

Question

I have a container with unknown width and two children.

I want the first child to determine the width of the container.

I want the second child to wrap inside the container.

How can I do this using e.g. flexbox?

<div class="container">
  <div class="first">this determines the container width</div>
  <div class="second"> if this is too long, it wraps around</div>
</div>

score 2 · Answer 1 · answered Aug 31 '21 at 10:52

first you will have to add display: inline-block to your container because div by default have display: block which takes 100% width

next set .container width to max-content so it will take only as many space as it needs to fit whole content and with .first that by default have display: block this element will set width for .container

lastly set max-width: fit-content on your .second element so it will "fit" inside container.

.container {
    display: inline-block;
    background-color: red;
    width: max-content;
}
.second {
    max-width: fit-content;
}

<div class="container">
    <div class="first">this determines the container width</div>
    <div class="second">asd asd if this is too long, it wraps around asd asd</div>
</div>

Css prevent child from expanding parent

1 Answers1