React, typescript: Wrapping text inside table <td> doesn't work

Question

I'd like to wrap the text inside a table cell. I tried "flex-wrap", "break-inside" and similar properties, nothing has worked so far.

It has already worked a few days ago, but I had to modify the table and afterwards it didn't wrap the text anymore. You can scroll along x axis to read the whole text which doesn't fit into the given box, even though I have no "overflow-x: scroll" for this Container or table.

Here's my code for the table:

const CommitMsgTable = ({ apiCommitsResponse }: CommitMsgTableProps) => {
    let colorToggle = false;
    return <div><table>{apiCommitsResponse.map(commit => {
        colorToggle = !colorToggle;
        return (
            <tr>
                <td style={{ whiteSpace: "nowrap", backgroundColor: colorToggle ? "lightgrey" : "white" }}>{processDate(commit.date)}</td>
                <td style={{ backgroundColor: colorToggle ? "lightgrey" : "white" }}>                
                    {commit.comment}
                </td>
            </tr>)
    })}
    </table></div>
}

This is the container, the table sits in:

export const CommitContent = styled.div`
  width: 100%;
  height: 250px;
  padding: 0em;
  border: 1px solid;
  margin: 0em;
  overflow-y: scroll;
`;

It is supposed to look something like this:

7 minutes ago	commit message, which is very long so the text has to wrap instead of adding a scroll bar underneath the table, so I only have to scroll along y axis. I don't want to scroll in x direction
...	...

Don't mind the "7 min ago" wrapping, it is fine in my real table.