Prevent a specific child div from expanding the parent div

Question

I'm currently developping a website and encountered a problem with CSS.

I have a parent div containing 2 or more children: one containing the name of a user that sits on top of the other children, and just below 1 or more side by side divs which display items owned by the user.

At the moment it works fine, but if the user's name (top div) is larger than the total width of the divs below, it will expand the parent div.

I'd like to only allow the bottom divs to expand the parent div and make the title div use the full parent div's width without being able to make it larger.

I created a fiddle about it: http://jsfiddle.net/mLxjL/2/

HTML:

<div class="matches">
    <div class="match-container">
        <div class="user-match-container">
            <div class="match-owner user">You</div>
            <div class="match">
                <div class="thumbnail">
                    <img class="image-container" src="img-path">
                    <div class="thumbnail-count">2</div>
                </div>
                <div class="item-name">The Zeppelin of Consequence (Trading Card)</div>
            </div>
        </div> <span class="arrow">→</span> 
        <div class="user-match-container">
            <div class="match-owner friend">PfaU- [W] King Arthurs Gold</div>
            <div style="clear:both;"></div>
            <div class="match">
                <div class="thumbnail">
                    <img class="image-container" src="img-path">
                    <div class="thumbnail-count">2</div>
                </div>
                <div class="item-name">The Lost Hobo King</div>
            </div>
        </div>
    </div>
</div>

CSS:

.match-container:before, .match-container:after {
    content:"";
    display:table;
}
.match-container:after {
    clear:both;
}
.match-container {
    border:1px solid #666;
    background-image:url('img/stripes.png');
    border-radius:5px;
    padding:10px;
    margin:10px;
    float:left;
}
.match {
    width:112px;
    float:left;
    margin: 0 2px;
}
.match .image-container {
    width:112px;
    height:130px;
    display:block;
}
.match .item-name {
    line-height:12px;
    font-size:10px;
    margin-top:4px;
    text-align:center;
    height:24px;
    overflow:hidden;
    clear:both;
}
.match-container .arrow {
    float:left;
    position:relative;
    top:70px;
    margin:5px;
}
.match-owner {
    line-height:14px;
    font-size:12px;
    margin-top:4px;
    text-align:center;
    height:14px;
    overflow:hidden;
    margin-bottom:4px;
    border:1px solid #666;
    background-image:url('img/stripes.png');
    border-radius:5px;
}
.match-owner.user {
    background-color:green;
}
.match-owner.friend {
    background-color:red;
}
.thumbnail-count {
    position:relative;
    top:-24px;
    margin-bottom:-24px;
    font-size:16px;
    font-weight:bold;
    border-top:1px solid white;
    border-right:1px solid white;
    border-top-right-radius: 7px;
    font-size:18px;
    background: rgb(160, 160, 160) transparent;
    background: rgba(160, 160, 160, 0.70);
    padding: 0 4px;
    float:left;
}
.user-match-container {
    float:left;
}

Is it possible to do this without using JavaScript?

Have you tried a `max-width` declaration on your title element? — Alex Lynham, Jan 08 '14 at 11:15
Thanks for your answer, I don't want to declare a max-width as I want my title element to have the same width than the total width of the items below it. — Robou, Jan 08 '14 at 11:23
take a look at using "max-width: fit-content;" at you child element — Marisol Gutiérrez, Aug 23 '20 at 15:52
[Ethan H](https://stackoverflow.com/users/11279075) posted an [Answer](https://stackoverflow.com/a/68597232) saying "Thank you @Marisol-Gutierez Your comment worked for me. I added `style="display:inline-block;"` to the parent `
`. I used `style="max-width:fit-content;"` on the child `
`, and the child didn't expand the parent div. The text line wrapped as I needed." — Scratte, Aug 18 '21 at 15:52

web-tiki · Accepted Answer · 2015-03-09T13:53:53.077

28

You can use Absolute positioning

FIDDLE

position:absolute;
top:0;
left:0;
width:100%;

and on the container div :

padding-top: /*the height of the absolutly positioned child*/ ;
position:relative;

edited Mar 09 '15 at 13:53

answered Jan 08 '14 at 11:18

web-tiki

99,765
32
217
249

103

Very poor solution for content with a non-consistent height – keeehlan Jan 20 '15 at 20:36

score 8 · Answer 2 · edited Nov 15 '17 at 22:53

8

If you add the following styles you should achieve what you want:

.user-match-container {
  position: relative;
  padding-top: 22px;
}

.match-owner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
}

Example

edited Nov 15 '17 at 22:53

jtenclay

249
4
6

answered Jan 08 '14 at 11:31

Pete

57,112
28
117
166

score 0 · Answer 3 · answered Jun 12 '23 at 08:46

0

You could also just set height to fit-content so that the child div height grows as the content grows

answered Jun 12 '23 at 08:46

Mpwanyi Samuel

178
3
7

Could you expand on this answer? – Adonis K. Kakoulidis Jul 06 '23 at 14:16
If you need a Div to grow in height as it's content grows, you just need to set `height: fit-content` – Mpwanyi Samuel Jul 07 '23 at 15:33

Prevent a specific child div from expanding the parent div

3 Answers3

Linked