<TelerikNumericTextBox @bind-Value="@width" Step="20" Min="0" Max="800"></TelerikNumericTextBox>
@code{
    int width { get; set; } = 200;
}
<div style="display:flex; flex-direction: row;">
    <div style="width: @(width)px; background: yellow;">
        some content on the left. When this is here, resizing tiles cannot use the full width of the tile layout
        - it stops short with the offset by this element due to the flex layout.
        Change the width of this element to see the effect - as you increase you will stop being
        able to resize 1column tiles at all. If you decrease, eventually you will be.
    </div>
    <div style="position: relative; display: block;"> @* THE WORKAROUND - REMOVE TO SEE THE PROBLEM *@
        <TelerikTileLayout ColumnWidth="200px"
                           RowHeight="150px"
                           Width="700px"
                           Columns="3"
                           Resizable="true">
            <TileLayoutItems>
                <TileLayoutItem HeaderText="Panel 1">
                    <Content>Regular sized first panel.</Content>
                </TileLayoutItem>
                <TileLayoutItem HeaderText="Panel 2">
                    <Content>You can put components in the tiles too.</Content>
                </TileLayoutItem>
                <TileLayoutItem HeaderText="Panel 3" RowSpan="3">
                    <Content>This tile is three rows tall.</Content>
                </TileLayoutItem>
                <TileLayoutItem HeaderText="Panel 4" RowSpan="2" ColSpan="2">
                    <Content>This tile is two rows tall and two columns wide</Content>
                </TileLayoutItem>
            </TileLayoutItems>
        </TelerikTileLayout>
    </div>
</div>