"grid-template-columns: fit-content (50%) 1fr;" работает не так, как ожидалось

#css

Вопрос:

В моем приложении есть элемент, который содержит два элемента диапазона (заголовок и описание). Я бы хотел, чтобы ширина заголовка была больше по сравнению с шириной описания, но если заголовок слишком большой, ограничьте его, чтобы также отображалось описание. Мое решение (полный код здесь)

 .info {
  display: grid;
  grid-template-columns: fit-content(50%) 1fr;
  overflow: hidden;
  
  margin-bottom: 20px
}

но у этого решения есть проблема со случаем, когда заголовок длинный, а описание слишком короткое.

В моем приложении это работает по-другому. (код здесь)

Если описания нет, ширина заголовка по-прежнему составляет 50%.

Как это реализовать, может быть, есть более простой способ?

Ответ №1:

 .container {
  max-width: 500px;
  margin: 0 auto;
}

.info {
  display: flex;
  align-items: left;
  text-align: left;
}

.title {
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 50%;
  margin: 0 5px 0 0;
}

.description {
  color: #67697c;
  overflow: hidden;
  font-size: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

 <div class="container">
  <section class="info">
    <div class="title">
      short title
    </div>
    <div class="description">
      shor description
    </div>
  </section>
  <section class="info">
    <div class="title">
      short title
    </div>
    <div class="description">
      long description - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec quam nulla. In eu dui faucibus, euismod urna eu, consequat elit.
    </div>
  </section>
  <section class="info">
    <div class="title">
      long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec quam nulla. In eu dui faucibus, euismod urna eu, consequat elit.
    </div>
    <div class="description">
      short description
    </div>
  </section>
  <section class="info">
    <div class="title">
      long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec quam nulla. In eu dui faucibus, euismod urna eu, consequat elit.
    </div>
    <div class="description">
      long description - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec quam nulla. In eu dui faucibus, euismod urna eu, consequat elit.
    </div>
  </section>
  <div class="title">
    long title without description - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec quam nulla. In eu dui faucibus, euismod urna eu, consequat elit.
  </div>
  </section>
</div>

Я добавил flex в родительский div и дал 50% максимальной ширины для заголовка.

1. ваше решение имеет 2 проблемы: 1) при отсутствии описания максимальная ширина заголовка составляет 50% 2) в случае длинного описания и короткого заголовка заголовок будет сокращен (хотя это не должно быть)