CODEWITHSUNDEEP
htmlcss
user3607282
user3607282

Reputation: 2555

Stop position absolute child from taking parent's width

I have a div (the parent) which when hovered on, a menu will appear.

The parent is 30px X 30px.

The menu is a position absolute element which can expand upto 200px based on the content.

The problem with this is, the child doesn't expand beyond the 30px of the parent. But what I want is for it to expand to it's content and stop expanding after 200px.

Is there a different way to do this without setting a fixed width to the child?

.parent {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: yellow;
  border: 1px solid;
  position: relative;
}

.child {
  position: absolute;
  background-color: aqua;
  border: 1px solid;
  display: none;
  max-width: 200px;
}

.parent:hover .child {
  display: block;
}
<div class="parent">
  P
  <div class="child">
    Hey diddle diddle the cat and the fiddle.
  </div>
</div>

Hover over the parent to see the child element is taking the parent's size.

Upvotes: 3

Views: 2931

Answers (3)

Frost Draky
Frost Draky

Reputation: 70

width: max-content;
       ^^^-- it can help

Upvotes: -1

Eliya Cohen
Eliya Cohen

Reputation: 11468

If you don't want the child's width to be affected by its parent, then you have to remove the position: relative of the parent. Look at this example:

.parent {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: yellow;
  border: 1px solid;
}

.child {
  position: absolute;
  background-color: aqua;
  border: 1px solid;
  display: none;
  max-width: 200px;
}

.parent:hover .child {
  display: block;
}
<div class="parent">
  P
  <div class="child">
    Hey diddle diddle the cat and the fiddle.
  </div>
</div>

Upvotes: 2

DiabloSteve
DiabloSteve

Reputation: 431

If I understand correctly, you need to site the menu to max 200 and fill this if possible. The problem is, that the parent has 30px width, and the children is in it, so it will have 30px if you not use min-with.

The child need a parent element with larger width. Try this modification:

<script>
.title {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: yellow;
  border: 1px solid;
  position: relative;
}
.parent{
  position: relative;
}
.child {
  position: absolute;
  background-color: aqua;
  border: 1px solid;
  display: none;
  max-width: 200px;
}

.title:hover + .child {
  display: block;
}
</script>

<div class="parent">
<div class="title">P</div>
  <div class="child">
    Hey diddle diddle the cat and the fiddle.Hey diddle diddle the cat and the fiddle.Hey diddle diddle the cat and the fiddle.Hey diddle diddle the cat and the fiddle.
  </div>
</div>

Upvotes: 0

Related Questions