I have a position absolute element which has a min-width. What I want to do is to align the absolute element's end to the relative element's end.

The relative element DOES NOT have a fixed width. The width can be vary depending on the content inside.

The use case here is, I'm building a custom dropdown. The relative element is the label which has the selected text and the position absolute element is the dropdown.

<div class="container">
 <div class="text">Text from list</div>
 <ul class="list">...</ul>
</div>

The image above has the look I'm expecting. What should I do to get this alignment? Can it be done with pure CSS?

I have a position absolute element which has a min-width. What I want to do is to align the absolute element's end to the relative element's end.

The relative element DOES NOT have a fixed width. The width can be vary depending on the content inside.

The use case here is, I'm building a custom dropdown. The relative element is the label which has the selected text and the position absolute element is the dropdown.

<div class="container">
 <div class="text">Text from list</div>
 <ul class="list">...</ul>
</div>

The image above has the look I'm expecting. What should I do to get this alignment? Can it be done with pure CSS?

• javascript
• html
• css

3 Answers 3

.relative-div {
	position:relative;
	min-height: 50px;
	background:#BB9A9B;
}
.abs-div {
	position: absolute;
	right: 0;
    top: calc(100% + 10px);
	min-width: 100px;
	min-height: 50px;
	background: red;
}

<div class="container">
	<div class="relative-div">
	relative-div
		<div class="abs-div"></div>
	</div>
</div>

.element {
    padding: 0.75rem 1rem;
    border: 1px solid navy;
    background-color: dodgerblue;
    color: white;
    margin: 10px 0px;
}

.parent-class {
    position: absolute;
    right: 0px;
}

.relative-element {
    position: relative;
 }

.absolute-element {
    position: absolute;
    min-width: 200px;
    right: 0px;
}

    <div class="parent-class">
      <div class="element relative-element">Relative Element</div>
      <div class="element absolute-element">Absolute Element</div>
    </div>

i would remend to use flex-box. here is a cheat-sheet https://css-tricks./snippets/css/a-guide-to-flexbox/