Типография с заданным noWrap не сжимается в гибкой рамке, чтобы показать многоточие

Question

Ну, у меня в настоящее время есть страница «с двумя столбцами», левый столбец - «Dynami c», показывающий текст, который можно сжать с помощью многоточия. Правый столбец должен «соответствовать содержимому»

import {Typography} from "@material-ui/core";
import * as React from "react";
import {makeStyles} from "@material-ui/core/styles";

const styles = (theme: ThemeTy) => ({
    mainHeader: {
        display: "flex"
    },
    basicInfo: {
        flexGrow: 1,
        flexShrink: 1,
    },
    rightInfo: {
        flexGrow: 0,
        flexShrink: 0,
        backgroundColor: "cyan",
        display: "inline-flex",
        flexDirection: "column",
    },

});

const useStyles = makeStyles(styles);

export const MyComponent = function (props) {
    const classes = useStyles();


    return <div className={classes.mainHeader}>
        <div className={classes.basicInfo}>
                <Typography variant={"body2"} display={"inline"} noWrap>
                    {"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quam elit, gravida eu sodales sit amet, facilisis vel quam."}
                </Typography>    
        </div>
        <div className={classes.rightInfo}>
            <Typography variant={"body2"}>Some text hello world!</Typography>
        </div>
    </div>;
});

. Однако происходит то, что левый столбец будет сжиматься только до «максимального содержимого», и типография никогда не будет усечена; Растяжение страницы за пределы экрана.

Конечная цель - выровнять «rightInfo» по правой части окна и заставить основную информацию c заполнить оставшееся пространство.