2 elements inside 1 div, i want the other element to scale with the first one

user_4850140 0
Viewed 122

I have a button component with a little accent styling on the left of the button. I want the button to get height based on the content. The "text"-variable could be any text, so it could change any time. i want the button accent to scale with the text, but I can't use 100% or anything like that cause its parent doesnt have any sett height (because I want it to fit content). The button_accent do get height when i set manually, but i want it dynamicly

  <div className={`${buttonStyles.button}`} >
    <div className={`${buttonStyles.button_accent} h-full`}></div>
    <div className="mr-3 ml-3 justify-start w-full flex items-center">
      {text}
    </div>
  </div>

Button.module.css:

.button {
  display: flex;
  height: auto;
  min-height: 80px;
  border: 1px solid #d8fc9133;
  font-size: 24px;
  color: white;
  font-weight: medium;
  background: rgb(128, 128, 128, 0.5);
  align-items: center;
}
.button:hover {
  background: rgb(128, 128, 128, 1);
  cursor: pointer;
}
.button_accent {
  width: 12.77px;
  background-color: #d8fc91;
}

Heres the button with the accent with height set to 65px. (with no height set, the accent gets 0 height)

enter image description here

tailwind-css next.js css html
1 Answers

You could add position: relative to the parent container .button and then absolutely position the first div .button_accent relative to the parent. This way you don't need to set any explicit absolute length unit for the height value of .button_accent but now can use height: 100% and let the accent container grow or "scale" to match the height of its parent.

If you remove the text content you will see that the accent still displays and scales to fill its parent which is forced to be at minimum 80px in height from your min-height: 80px declaration. When you get rid of this explicit min-height and there isn't text content in the <td>, the accent mark wont display as the parents content box is empty with zero height.

After positioning the elements, we can use height: 100% or another relative length unit for the accent to scale with the text because its absolutely positioned relative to the parent container which is a flexbox and has a auto height and min-height of 80px. If you don't want the accent to occupy 100% of the parent containers height, but to have some top/bottom space like shown in your included image, just use height: 80% or some relative length unit to size the accent to your liking.

.button {
  position: relative;
  display: flex;
  height: auto;
  min-height: 80px;
  border: 1px solid #d8fc9133;
  font-size: 24px;
  color: white;
  font-weight: medium;
  background: rgb(128, 128, 128, 0.5);
  align-items: center;
}
.button:hover {
  background: rgb(128, 128, 128, 1);
  cursor: pointer;
}

.button div:last-child {
  margin: 0 1.5rem;
}

.button_accent {
  position: absolute;
  left: 0;
  width: 12.77px;
  height: 80%; /* 100% fills entire height of parent */
  background-color: #d8fc91;
}
<div class="button">
    <div class="button_accent"></div>
    <div class="mr-3 ml-3 justify-start w-full flex items-center">
      Some text
    </div>
  </div>

user_113895810
Related