Div передает полную ширину родительского div

Question

Здравствуйте. У меня есть дочерний элемент div, который по какой-то причине передает всю ширину родительского элемента div. Я до сих пор не могу найти решение:

, например:

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

код:

<Styled.ChatBox>
 <Styled.ChatLog>
    <Styled.MessageWrapper user={true}>
      <Styled.ChatMessage user={true}>{props.children}</Styled.ChatMessage>
    </Styled.MessageWrapper>
 </Styled.ChatLog>
</Styled.ChatBox>

css:

const messageBot = css`
  align-self: flex-start;
  background-color: #e0e0e0;
  color: black;
  border-radius: 8px;
  padding: 10px 10px 10px 15px;
  font-size: 15px;
  font-family: sans-serif;
`;
const messageClient = css`
  align-self: flex-end;
  background-color: #1a6fe8;
  color: white;
  border-radius: 8px;
  padding: 10px 10px 10px 15px;
  font-size: 15px;
  font-family: sans-serif;
`;
const ChatBox = styled.div`
  display: ${props => (props.widget ? 'none' : 'flex')};
  position: absolute;
  position: fixed;
  right: 20px;
  bottom: 20px;
  flex-direction: column;
  max-width: 22em;
  width: 100%;
  height: 30em;
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px 2px;
  background: ${props => (props.widget ? 'red' : 'blue')};
`;
const ChatLog = styled.div`
  display: flex;
  flex-direction: column;
  max-height: 400px;
  width: 100%;
  overflow-y: auto;
  flex: 1 100%;
  background: red;
  padding: 10px 10px 0px 10px;
  box-sizing: border-box;
`;
const MessageWrapper = styled.div`
  background: yellow;
  display: flex;
  align-items: center;
  flex-direction: row;
  box-sizing: border-box;
  width: 100%;
  justify-content: ${props => (props.user ? 'flex-end' : 'flex-start')};
`;
const ChatMessage = styled.div`
  position: relative;
  margin: 1ex;
  padding: 1ex;
  border-radius: 2px;
  :before {
    content: '';
    position: absolute;
    top: 50%;
    right: ${props => (props.user ? '-5px' : '')};
    left: ${props => (props.user ? '' : '1px')};
    height: 15px;
    width: 15px;
    background: ${props => (props.user ? '#1a6fe8' : '#e0e0e0')};
    transform: rotate(45deg);
    transform-origin: top right;
  }
  ${props => (props.user ? messageClient : messageBot)}
`;

Я знаю, что мой div, который передает размер, является ChatMessage. Я полагаю, что это проблема img:

пример:

https://codesandbox.io/s/cool-water-1dwqx

Answer 1

Вам необходимо справиться с переполнением элемента.

const ChatMessage = styled.div`
  ...
  overflow: hidden;
  word-break: break-all;
`;