Css width + position

143

20 апреля 2017, 14:31

Друзья, столкнулся с такой проблемой. Делаю чат на сайт. Блок с сообщениями имеет фикс.ширину (100%). Внутри этого блока лесенкой появляются блоки с сообщениями. Так вот проблема сама в том, что если у блоков с сообщениями убрать значение width - то эти гадины растягиваются на всю ширину родительского блока. А мне нужно,чтобы ширина каждого была исключительно под количество контента. Но не более чем 70% от ширины родителя.

Использую для родителя display:flex; direction- column. Кроме того, пытался детям выставлять дисплей блок и позишн релатив,а далее лефт :0 , для входящих и райт:0,для исходящих. Но эти падлы на своих местах остаются ...

Answer 1

Примерно так =)

.chat { 
  width: 400px; 
  height: 400px; 
  background-color: #ccc; 
  padding: 0 30px; 
  display: flex; 
  flex-direction: column; 
  margin: 15px auto 0 
} 
 
.chat .name-chat { 
  text-align: center; 
  margin-bottom: 30px; 
  border-bottom: 2px solid #000 
} 
 
.chat .message-field { 
  display: flex; 
  flex-direction: column; 
  overflow-y: scroll; 
  height: 100% 
} 
 
.chat .message-field .message { 
  max-width: 70%; 
  color: #fff; 
  background-color: #00f; 
  align-self: flex-start; 
  border-radius: 30px; 
  padding: 0 15px; 
  margin-bottom: 8px 
} 
 
.chat .message-field .my { 
  background-color: #00f; 
  align-self: flex-start 
} 
 
.chat .message-field .friend { 
  background-color: green; 
  align-self: flex-end 
} 
 
.chat .create-message { 
  height: 80px; 
  display: flex; 
  justify-content: center; 
  align-items: flex-end 
} 
 
.chat .create-message form { 
  margin: 15px 0 
}

<div class="chat"> 
      <h2 class="name-chat">Супер чат</h2> 
      <div class="message-field"> 
        <div class="my message"> 
          <p>Привет) Как дела? У меня сообщение макс длинны 70 процентов прикинь)</p> 
        </div> 
        <div class="friend message"> 
          <p>Приветик всё супер)</p> 
        </div> 
        <div class="friend message"> 
          <p>Ты как?</p> 
        </div> 
        <div class="my message"> 
          <p>Тоже хорошо)  </p> 
        </div> 
        <div class="my message"> 
          <p>Чем занимаешься?</p> 
        </div> 
        <div class="friend message"> 
          <p>Отдыхаю...   </p> 
        </div> 
      </div> 
      <div class="create-message">  
        <form action="#" method="#"> 
          <input type="text"/> 
          <button>Отправить  </button> 
        </form> 
      </div> 
    </div>