Stop position absolute child from taking parent's width

user_3607282 0
Viewed 1758

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.

css html
2 Answers

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>

user_18605400

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>
user_92186500
Related