Пользовательский интерфейс материала FlexBox basi c расположение элементов, теперь можно выравнивать их по левому и правому краю в одном ряду

Question

Пользовательский интерфейс материала FlexBox basi c расположение элементов, теперь можно выравнивать их по левому и правому краю в одной строке

Я начинаю с пользовательского интерфейса материала, библиотека очень полезна. Но стиль иногда сложен. Теперь нужно организовать некоторые элементы управления внутри элемента списка. Конечно, это возможно благодаря некоторой раскладке и отображению Flex. Но я просто хочу использовать элементы Material-UI.

В псевдокоде:

<List maxWidth=450 >
<ListItem >
<IconButton align=left>< IconButton align=left> < text grow align=left > < IconButton align=right>< IconButton align=right>
<ExpansionPanel Number1, with full width and expand vertical> 
<ExpansionPanel Number2, with full width and expand vertical> 
</ListItem>
.
.
.
</List>

Элементы управления, выделенные синим и зеленой областью, не должны переноситься. Текстовое содержимое не должно быть перенесено и скрыто при переполнении, если это возможно с помощью многоточия (...). Ширина текстового объекта должна увеличиваться, чтобы заполнить оставшееся пространство между кнопками. Вертикальное выравнивание правых элементов управления (зеленая область) должно соответствовать базовой линии или центру. На прикрепленном изображении светло-голубая область представляет собой ширину списка, только первый элемент отображается частично хорошо, другой не учитывает свойства.

Может кто-нибудь дать мне несколько советов .

import React from "react";
import { makeStyles } from '@material-ui/core/styles';
import { Grid, Paper, Typography } from "@material-ui/core";

import Box from '@material-ui/core/Box';


import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';

import Checkbox from '@material-ui/core/Checkbox';
import Button from "@material-ui/core/Button";
import IconButton from "@material-ui/core/IconButton";
import Switch from '@material-ui/core/Switch';
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';

import LinearScaleIcon from '@material-ui/icons/LinearScale';
import ViewModuleIcon from '@material-ui/icons/ViewModule';
import DashboardIcon from '@material-ui/icons/Dashboard';
import ViewQuiltIcon from '@material-ui/icons/ViewQuilt';

import WbSunnyIcon from '@material-ui/icons/WbSunny';
import BrightnessLowIcon from '@material-ui/icons/BrightnessLow';
import EqualizerIcon from '@material-ui/icons/Equalizer';


import { red, blue, green } from '@material-ui/core/colors';


const text = [

 { date : "2019.09.10",name: "layer", source : "S 1"}, 
 { date : "2019.10.21",name: "Consectetur adipiscing", source : "Source 2"}, 
 { date : "2019.09.10",name: "Suspendisse malesuada lacus ex", source : "Source 51"}
]






const cssStyles = makeStyles(theme => ({SelectIcon: {transform: "scale(1.5)"}}));

function BoxTest(props) {

 const classes = cssStyles();

  const showIcon = (value) => {
      switch(value) {
    case 0:
      return <LinearScaleIcon/>;
    case 1:
      return <ViewModuleIcon/>;
    case 2:
      return <DashboardIcon/>;
    case 3:
      return <ViewQuiltIcon/>;
    
    default:
      return value;
  }
  };
  
  return (    


      <List dense style={{ backgroundColor: "lightblue" , maxWidth: "450px" , padding:"0px", margin:"0px"}} >

        {text.map(item => (

          <ListItem   >

            <Box display="flex" flexDirection="column" >
               <Box display="flex" flexDirection="row"  alignContent="flex-start"  >

                <Box flexDirection="row" flexWrap="nowrap" bgcolor="blue"  >
                    <Checkbox />
                    <Switch  />                                            
                </Box>

                <Box flexGrow={1} flexWrap="nowrap" alignItems="center"  bgcolor="grey.500" >
                   <Typography variant="body1" noWrap display="inline" style={{maxWidth : "200"}} >
                   {item.date +" "+ item.name +", "+ item.source}                     
                    </Typography>
                </Box>

                <Box flexWrap="nowrap" alignItems="center"  bgcolor="green" >

                    <Select value={3} classes={{ icon: classes.grdSelectIcon}} 
                      onChange={(e) => { console.log( e.target.value); }}                          
                      renderValue={ showIcon }  >          
                      <MenuItem value={0}><LinearScaleIcon/> Proportional</MenuItem>
                      <MenuItem value={1}><LinearScaleIcon/> Interval 3</MenuItem>
                      <MenuItem value={2}><LinearScaleIcon/> Interval 4</MenuItem>
                      <MenuItem value={3}><ViewModuleIcon/> Quartil </MenuItem>
                      <MenuItem value={4}><DashboardIcon/>  Quintil</MenuItem>
                      <MenuItem value={5}><ViewQuiltIcon/>  Std. Desviation</MenuItem>          
                      <MenuItem value={6}><ViewQuiltIcon/>  IQR</MenuItem>       
                    </Select>   

                    <IconButton size="small" ><EqualizerIcon /></IconButton>                               
                    <IconButton size="small" ><WbSunnyIcon   /></IconButton>
                </Box>
               
            </Box>
            <Box>
                <ExpansionPanel> 
                 <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
                      <Typography >Expansion Panel 1</Typography>
                </ExpansionPanelSummary>          
                <ExpansionPanelDetails>
                  <Typography>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
                    sit amet blandit leo lobortis eget.
                  </Typography>
                </ExpansionPanelDetails>
              </ExpansionPanel>

            </Box>
            <Box>
                <ExpansionPanel> 
                 <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />} >
                      <Typography >Expansion Panel 2</Typography>
                </ExpansionPanelSummary>          
                <ExpansionPanelDetails>
                  <Typography>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
                    sit amet blandit leo lobortis eget.
                  </Typography>
                </ExpansionPanelDetails>
              </ExpansionPanel>

            </Box>
          </Box>

          </ListItem>
              
              
            

        ))}

         </List>
    
  );
}


const rootElement = document.getElementById("react");
ReactDOM.render(<BoxTest/>,  rootElement);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Привет