Зависимый размер button от соседнего элемента блока

Question

У меня есть карточка, где указана информация о книге. Снизу есть кнопка + (добавить в корзину) и кнопка добавления в избранное. Чтобы соблюсти дистанцию между кнопками, я использовал margin-left к кнопке "избранное", но кнопка добавить автоматически сужается в горизонтальном размере. Мне нужно, чтобы она всегда оставалась полностью круглой. Снизу прилагаю скриншот проблемы

.card {
  background-color: #ffffff;
  padding: 20px;
  margin-bottom: 20px;
  width: 180px;
  border-radius: 40px;
  border: 1px solid #e9e9e9;
  margin-right: 28px;
  transition: box-shadow 0.2s ease-in-out, transform 0.2 ease-in-out;
  overflow: hidden;
}
.card img {
  border-radius: 5px;
}
.card:hover {
  box-shadow: 0px 14px 30px rgba(0, 0, 0, 0.08);
  transform: translateY(-5px);
}
.card .favorite {
  position: relative;
  cursor: pointer;
  left: 25px;
}
.card .favorite img {
  margin: 0;
  padding: 0;
}
.card span {
  font-size: 13px;
  opacity: 0.5;
  text-transform: uppercase;
}
.card b {
  font-size: 13px;
}
.card h5 {
  font-weight: 400;
  font-size: 14px;
}
.card .cardAdd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 70px;
}
.card .cardAdd .cardPrice {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card .cardAdd .plus {
  position: sticky;
  margin-left: 30px;
  width: 40px;
  height: 40px;
  font-size: 30px;
  background-color: transparent;
  color: #b9b9b9;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  border: 1px solid #e9e9e9;
  border-radius: 40px;
}

<div class="card">
  <img src={imageUrl} width="150" height="auto" alt="" />
  <h5>{title}</h5>
  <div class="cardAdd">
    <div class="cardPrice">
      <span>Price: </span>
      <b>{price} $</b>
    </div>
    <button class="plus" onClick={onClickPlus} alt="Add to cart">+</button>
    <div class="favorite" onClick={onClickFavorite}>
      <img src={isFavorite ? "/images/like.png" : "/images/unliked.png"} alt="Add to favorite" />
    </div>
  </div>
</div>

Answer 1

Добавьте для .plus свойство flex-shrink: 0, чтобы оно не сжималось.
Подробнее о свойстве - flex-shrink - CSS | MDN

.card {
  background-color: #ffffff;
  padding: 20px;
  margin-bottom: 20px;
  width: 180px;
  border-radius: 40px;
  border: 1px solid #e9e9e9;
  margin-right: 28px;
  transition: box-shadow 0.2s ease-in-out, transform 0.2 ease-in-out;
  overflow: hidden;
}
.card img {
  border-radius: 5px;
}
.card:hover {
  box-shadow: 0px 14px 30px rgba(0, 0, 0, 0.08);
  transform: translateY(-5px);
}
.card .favorite {
  position: relative;
  cursor: pointer;
  left: 25px;
}
.card .favorite img {
  margin: 0;
  padding: 0;
}
.card span {
  font-size: 13px;
  opacity: 0.5;
  text-transform: uppercase;
}
.card b {
  font-size: 13px;
}
.card h5 {
  font-weight: 400;
  font-size: 14px;
}
.card .cardAdd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 70px;
}
.card .cardAdd .cardPrice {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card .cardAdd .plus {
  flex-shrink: 0;
  position: sticky;
  margin-left: 30px;
  width: 40px;
  height: 40px;
  font-size: 30px;
  background-color: transparent;
  color: #b9b9b9;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  border: 1px solid #e9e9e9;
  border-radius: 40px;
}

<div class="card">
  <img src={imageUrl} width="150" height="auto" alt="" />
  <h5>{title}</h5>
  <div class="cardAdd">
    <div class="cardPrice">
      <span>Price: </span>
      <b>{price} $</b>
    </div>
    <button class="plus" onClick={onClickPlus} alt="Add to cart">+</button>
    <div class="favorite" onClick={onClickFavorite}>
      <img src={isFavorite ? "/images/like.png" : "/images/unliked.png"} alt="Add to favorite" />
    </div>
  </div>
</div>

БЛОГ НА HUSL

Зависимый размер button от соседнего элемента блока

Ответы (1 шт):