Div passing full width of parent div - css

Question

Hello I have a daughter div that is passing the full width of the parent div for some reason I still can't find the solution:
like this:
for some reason instead of skipping paragraph it is always horizontal I've tried everything and found no solution.
code:
<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)}
`;
I know that my div that is passing the size is ChatMessage
I believe she is the problem
img:
example on:
https://codesandbox.io/s/cool-water-1dwqx

Answer 1

You need to handle the overflow of the element.
const ChatMessage = styled.div`
...
overflow: hidden;
word-break: break-all;
`;