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

Question

Я работаю с сеткой, и проблема, с которой я сталкиваюсь, заключается в том, что встроенный блок не работает с ней. Т.е. я хочу, чтобы высота и ширина моего div менялись в зависимости от содержимого внутри него. Если я не использую сетку, то она работает нормально, но с сеткой она растягивается до ширины столбца

.BotWrapper {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
  grid-auto-rows: minmax(20px, auto);
  margin-top: 0.8em;
  word-wrap: break-word;
}

.BotWrapper > div {
  margin-left: 2%;
  background: #BEE9E8;
  padding: 1.7%;
  display: inline-block;
  min-height: 40px;
  min-width: 6em;
  max-width: 20em;
  margin-bottom: 5px;
  margin-top: 10px;
  font-size: 0.9em;
  word-wrap: break-word;
}

.BotWrapper > div:nth-child(even) {
  background: transparent;
}

UserWrapper {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
  grid-auto-rows: minmax(30px, auto);
  margin-right: 1em;
  margin-top: 1em;
  word-wrap: break-word;
  background: blue;
}

.UserWrapper > div {
  float: right;
  margin-right: -2.2em;
  background-color: #62B6CB;
  padding: 1.7%;
  max-width: 20em;
  min-width: 6em;
  min-height: 40px;
  margin-top: 10px;
  display: inline-block;
  margin-bottom: 5px;
  font-size: 0.9em;
  word-wrap: break-word;
}

.UserWrapper > div:nth-child(odd) {
  background: transparent;
}

.speech-bubble {
  padding: 5rem;
  border: 2px solid #376996;
  border-top-right-radius: .6em;
  border-bottom-right-radius: .6em;
  border-bottom-left-radius: .6em;
}

.speech-bubble1 {
  position: relative;
  background: #62B6CB;
  border: 2px solid #376996;
  border-top-left-radius: .6em;
  border-bottom-left-radius: .6em;
  border-bottom-right-radius: .6em
}

.timeRight {
  font-size: 0.52em;
  float: right;
  margin-top: -1em;
  margin-bottom: 0;
  font-family: 'Mina', sans-serif;
}

.timeLeft {
  font-size: 0.52em;
  float: right;
  margin-top: -1em;
  margin-bottom: 0;
  font-family: 'Mina', sans-serif;
}

<div class="msgContainer" id="chat">
  <div class="BotWrapper">
    <div class="speech-bubble z-depth-5">
      <p>Hi</p>
      <p class="timeLeft">02:12:02</p>
    </div>
    <div class=""></div>
  </div>

  <div class="UserWrapper">
    <div class=""></div>
    <div class="speech-bubble1 z-depth-5">
      <p>Bye</p>
      <p class="timeRight">02:12:03</p>
    </div>
  </div>
</div>

Первый div - это когда я использую сетку, а для второго я удалил . из UserWrapper, поэтому он не выполняется как grid. Почему это происходит?

Answer 1

Я думаю, что вы ищете justify-items: start на контейнере. Это выравнивает элементы, чтобы быть вровень с начальным краем их ячейки, тогда как по умолчанию stretch, что заставляет детей заполнить всю ширину ячейки

CSS-хитрости Полное руководство

.BotWrapper {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
  grid-auto-rows: minmax(20px, auto);
  margin-top: 0.8em;
  word-wrap: break-word;
  justify-items: start; /* this */
}

.BotWrapper > div {
  margin-left: 2%;
  background: #BEE9E8;
  padding: 1.7%;
  min-height: 40px;
  min-width: 6em;
  margin-bottom: 5px;
  margin-top: 10px;
  font-size: 0.9em;
  word-wrap: break-word;
}

.BotWrapper > div:nth-child(even) {
  background: transparent;
}

UserWrapper {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1em;
  grid-auto-rows: minmax(30px, auto);
  margin-right: 1em;
  margin-top: 1em;
  word-wrap: break-word;
  background: blue;
}

.UserWrapper > div {
  float: right;
  margin-right: -2.2em;
  background-color: #62B6CB;
  padding: 1.7%;
  max-width: 20em;
  min-width: 6em;
  min-height: 40px;
  margin-top: 10px;
  display: inline-block;
  margin-bottom: 5px;
  font-size: 0.9em;
  word-wrap: break-word;
}

.UserWrapper > div:nth-child(odd) {
  background: transparent;
}

.speech-bubble {
  padding: 5rem;
  border: 2px solid #376996;
  border-top-right-radius: .6em;
  border-bottom-right-radius: .6em;
  border-bottom-left-radius: .6em;
}

.speech-bubble1 {
  position: relative;
  background: #62B6CB;
  border: 2px solid #376996;
  border-top-left-radius: .6em;
  border-bottom-left-radius: .6em;
  border-bottom-right-radius: .6em
}

.timeRight {
  font-size: 0.52em;
  float: right;
  margin-top: -1em;
  margin-bottom: 0;
  font-family: 'Mina', sans-serif;
}

.timeLeft {
  font-size: 0.52em;
  float: right;
  margin-top: -1em;
  margin-bottom: 0;
  font-family: 'Mina', sans-serif;
}

<div class="msgContainer" id="chat">
  <div class="BotWrapper">
    <div class="speech-bubble z-depth-5">
      <p>Hi</p>
      <p class="timeLeft">02:12:02</p>
    </div>
    <div class=""></div>
  </div>

  <div class="UserWrapper">
    <div class=""></div>
    <div class="speech-bubble1 z-depth-5">
      <p>Bye</p>
      <p class="timeRight">02:12:03</p>
    </div>
  </div>
</div>