Ion-item content exceeds width

I got something like the following. A list item with a left thumbnail, middle content and right content.
That works well, at least until there is some wider text in the middle content, e.g. in the h3-element.
What I would like to have is, that the middle content uses as much space as possible, without moving the right content out of view, and then wrapping the text to the next line.
Any idea how to achieve this?

<ion-item-sliding #slidingItem class="item-list-item">
    <button ion-item (click)="goToDetail(item)">
        <ion-thumbnail item-left>
            <ion-img src="/img/thumbnail-img.png"></ion-img>
        <p class="author">by {{}} ({{}}
        <p class="location">{{}}</p>
        <span class="time" item-right>
                        {{item.startTime | date: 'shortDate'}}
                        {{item.startTime | date: 'HH:mm'}}
                        <span *ngIf="item.endTime">
                            <span *ngIf="item.startTime.toDateString() != item.endTime.toDateString()">
                                {{item.endTime | date: 'shortDate'}}<br>
                            {{item.endTime | date: 'HH:mm'}}

        <button favorite (click)="addBookmark(slidingItem, session)" *ngIf="!item.bookmarked">
        <button danger (click)="removeBookmark(slidingItem, session)"

Ok I’ll answer it myself:
The trick was, to set the direct list item to width:100% (I am using this as component inside a div with *virtualItem attribute, I had to set the div to width 100%). This makes sure the row does not exceed the list and always takes the full width.
Furthermore i had to set

.item-inner ion-label {
  white-space: normal;

to make sure the text wraps to the next line.

Wrap your left/right and middle text in an ion-item tag and set it to text wrap.

<ion-item text-wrap>'content'</ion-item>