CSS - как настроить ширину контейнера по длине абзаца, не допуская его переноса?

Question

Я уверен, что мой вопрос доступен для Google, но я не могу найти ответ.

Я хочу создать эффект архивации, как во многих приложениях для Android с Android, где пузырьки имеют ширину абзаца + отступы,Я надеюсь, что я понятен:)

живой пример:

https://codepen.io/crova/pen/gzNzqG

html:

<div class="message">

  <img class="author-photo" src="http://institutogoldenprana.com.br/wp-content/uploads/2015/08/no-avatar-25359d55aa3c93ab3466622fd2ce712d1.jpg">

  <div class="message-main">
    <p class="message-info">John Smith, 15:14</p>

    <div class="bubble">
      <p class="message-content">
        lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor
      </p>
    </div>
  </div>

</div>

scss:

.message {
  display: flex;
  margin-bottom: 2rem;
  min-height: min-content;
}

.author-photo {
  border-radius: 50%;
  width: 5rem;
  height: 5rem;
  margin-right: 3rem;
  margin-top: 1rem;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.message-main {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
}

.bubble {
  height: 100%;
  max-width: auto;
  background-color: red;
  border-radius: 0.3rem;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  text-align: left;

  &::before {
    content: "";
    width: 2rem;
    height: 2rem;
    -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    background-color: red;
    display: block;
    transform: translateX(-1rem);
  }
}

.message-content {
  padding: 0 2rem;
  padding-bottom: 2rem;
  margin: 0;
}

Answer 1

Вот ваш код обновлен.

Обновлен рабочий пример ``

Вы должны установить в пузыре класса width: max-content; и в пузыре: до display: inline-block;

Answer 2

Единственное изменение, которое вам нужно сделать, это удалить "width: 100%" из класса "message-main"

.message {
  display: flex;
  margin-bottom: 2rem;
  min-height: min-content;
}

.author-photo {
  border-radius: 50%;
  width: 5rem;
  height: 5rem;
  margin-right: 3rem;
  margin-top: 1rem;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.message-main {
  //width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
}

.bubble {
  height: 100%;
  max-width: auto;
  background-color: red;
  border-radius: 0.3rem;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  text-align: left;

  &::before {
    content: "";
    width: 2rem;
    height: 2rem;
    -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    background-color: red;
    display: block;
    transform: translateX(-1rem);
  }
}

.message-content {
  padding: 0 2rem;
  padding-bottom: 2rem;
  margin: 0;
}

<div class="message">

  <img class="author-photo" src="http://institutogoldenprana.com.br/wp-content/uploads/2015/08/no-avatar-25359d55aa3c93ab3466622fd2ce712d1.jpg">

  <div class="message-main">
    <p class="message-info">John Smith, 15:14</p>

    <div class="bubble">
      <p class="message-content">
        lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor
      </p>
    </div>
  </div>

</div>

Answer 3

<div class="message">

  <img class="author-photo" src="http://institutogoldenprana.com.br/wp-content/uploads/2015/08/no-avatar-25359d55aa3c93ab3466622fd2ce712d1.jpg">

  <div class="message-main">
    <p class="message-info">John Smith, 15:14</p>

    <div class="bubble">
      <p class="message-content">
        lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor
      </p>
    </div>
  </div>

.message {
  display: flex;
  margin-bottom: 2rem;
  min-height: min-content;
}

.author-photo {
  border-radius: 50%;
  width: 5rem;
  height: 5rem;
  margin-right: 3rem;
  margin-top: 1rem;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.message-main {
  /*
    width: 100%;
    min-height: 100%;
  */
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  max-width: 500px; /* Change to any max value you need */
}

.bubble {
  height: 100%;
  max-width: auto;
  background-color: red;
  border-radius: 0.3rem;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  text-align: left;

  &::before {
    content: "";
    width: 2rem;
    height: 2rem;
    -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
    clip-path: polygon(100% 0, 0 0, 100% 100%);
    background-color: red;
    display: block;
    transform: translateX(-1rem);
  }
}

.message-content {
  padding: 1rem 2rem;
  margin: 0;
  display: inline-block;
}

<div class="message">

  <img class="author-photo" src="http://institutogoldenprana.com.br/wp-content/uploads/2015/08/no-avatar-25359d55aa3c93ab3466622fd2ce712d1.jpg">

  <div class="message-main">
    <p class="message-info">John Smith, 15:14</p>

    <div class="bubble">
      <p class="message-content">
        lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor
      </p>
    </div>
  </div>