CODEWITHSUNDEEP
htmlcss
Ivan
Ivan

Reputation: 872

css max-width is not working

I have parent element width:100px and position:relative. And I have its inner element with position:absolute. I need this inner element to stretch out up to 200px, but it doesn't work. Maximum value it takes is 100% of parent.

UPD I don't want width to be fixed. I just needed it to be up to 200px if there is content and auto if not much content there.

p.s. I need those position properties

Here's html:

<div class='parent'>
    <div>element</div>
    <div class="inner">
        <div class="item">text</div>
        <div class="item">text</div>
        <div class="item">text</div>
        <div class="item">text</div>
        <div class="item">text</div>
        <div class="item">text</div>
        <div class="item">text</div>
        <div class="item">text</div>
        <div class="item">text</div>
    </div>
</div>

styling:

.parent {
    width: 100px;
    border: 1px solid yellow;
    position: relative;
}

.inner {
    max-width: 200px;
    border: 1px solid red;
    position: absolute;
}

.item {
    float: left;
    border: 1px dotted grey;   
}

And jsfiddle to the example

Anyone please help

Upvotes: 3

Views: 4748

Answers (6)

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

This is expected behaviour. The max-width value of .inner is not reached because it is limited by the width of .parent and the floated .items will only be on the same row until they hit the right edge of the containing element.

One way around this issue is to use a pseudo element to achieve a similar bordered result without the restrictive width:

  • Remove width from .parent, this will cause it to take up 100% of the width as it is a block level element. Remove border: 1px solid yellow; as it will no longer have the desired result
  • Create a new pseudo element .parent:before. Set border: 1px solid yellow; and width: 100px; to show the yellow border on this instead
  • Set .parent:before to be position: absolute; and have height: 100%; to position it relatively .parent and get it to fill the correct area

Now that .inner is not restricted by the width of .parent it should abide by the max-width: 200px; rule.

.parent {
  position: relative;
}
.parent:before {
  border: 1px solid yellow;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  width: 100px;
}
.inner {
  border: 1px solid red;
  max-width: 200px;
  position: absolute;
}
.item {
  border: 1px dotted grey;
  float: left;
}
<div class='parent'>
  <div>element</div>
  <div class="inner">
    <div class="item">text</div>
    <div class="item">text</div>
    <div class="item">text</div>
    <div class="item">text</div>
    <div class="item">text</div>
    <div class="item">text</div>
    <div class="item">text</div>
    <div class="item">text</div>
    <div class="item">text</div>
  </div>
</div>

Upvotes: 1

jobin john
jobin john

Reputation: 46

Give position:static for the parent and then try

.parent {
    border: 1px solid yellow;
    position: static;
    width: 100px;
}

.inner {
    border: 1px solid red;
    max-width: 200px;
    position: absolute;
}

Upvotes: 0

Rohit Kumar
Rohit Kumar

Reputation: 2031

All that problem (odd behavior) is occurring due to this line -

.item {
    float: left; /* THIS ONE */
    border: 1px dotted grey;
}

you need to find some other alternative for those text blocks to align. You can use display: table-cell instead of float, but that makes the blocks go out of #content

I'll update my answer if I find any alternative.

Upvotes: 0

Nadeem Khoury
Nadeem Khoury

Reputation: 937

if you are using AngularJS, you can use ng-style = {'width':'200%'}. And if not, you can change it to inherit from parent `

.inner {
    max-width: inherit;
    border: 1px solid red;
    position: absolute;

}

Cheers.

Upvotes: 0

Jacob
Jacob

Reputation: 2071

add "width: 200%" to the .inner and the max-width will still work.

.inner {
    width: 200%;
    max-width: 200px;
    border: 1px solid red;
    position: absolute;
}

http://jsfiddle.net/jy6g2q7b/2/

Upvotes: 0

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

It is working fine. Your maximum width allowed is 200 pixels. See it here:

http://jsfiddle.net/jy6g2q7b/1/

Maybe you are searching only for width (is fixed)

 .inner { width: 200px; }

See it working: http://jsfiddle.net/jy6g2q7b/4/

Upvotes: 2

Related Questions