title: Applying css transition to width of an element so that it covers the 100% width of its container div [ReactJS]
body: <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import SearchIcon from '@material-ui/icons/Search';
  import InputBase from '@material-ui/core/InputBase';
  import { AccountCircle } from '@material-ui/icons';
  import { withStyles, AppBar, Toolbar, Paper, Typography, IconButton } from '@material-ui/core';
  
  const styles = (theme) =&gt; ({
  
      root: {
          borderRadius: theme.shape.borderRadius * 0.5,
          backgroundColor: theme.palette.primary.main,
          display: 'flex',
      },
  
      logo: {
          borderRadius: theme.shape.borderRadius * 0.5,
          backgroundColor: theme.palette.secondary.main,
          marginTop: theme.spacing.unit * 2,
          marginBottom: theme.spacing.unit * 2,
          marginLeft: theme.spacing.unit * 3,
          marginRight: theme.spacing.unit * 5,
          flex: 0.5,
      },
  
      logoFont: {
          color: theme.palette.primary.main,
          fontWeight: 'bolder',
          paddingTop: theme.spacing.unit * 0.5,
          paddingBottom: theme.spacing.unit * 0.5,
          paddingLeft: theme.spacing.unit * 2,
          paddingRight: theme.spacing.unit * 2,
      },
  
      headerPads: {
          paddingTop: theme.spacing.unit * 3,
          paddingBottom: theme.spacing.unit * 2,
          paddingRight: theme.spacing.unit * 10,
          paddingLeft: theme.spacing.unit * 10,
      },
  
      containerHorizontalAlignment: {
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'end',
          paddingTop: theme.spacing.unit,
          paddingBottom: theme.spacing.unit,
          flex: 10,
      },
  
      searchBar: {
          marginTop: theme.spacing.unit,
          marginBottom: theme.spacing.unit,
          marginLeft: theme.spacing.unit,
          marginRight: theme.spacing.unit * 5,
          borderRadius: theme.shape.borderRadius * 0.5,
          backgroundColor: theme.palette.secondary.main,
          width: 'auto',
          /* [theme.breakpoints.up('sm')]: {
              marginLeft: theme.spacing.unit,
              width: 'auto',
          }, */
          display: 'flex',
          flexDirection: 'row',
      },
  
      searchIcon: {
          color: theme.palette.primary.main,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          marginLeft: 20,
          height: '100%',
          width: theme.spacing.unit * 7,
      },
  
      inputRoot: {
          color: theme.palette.primary.main,
          width: '100%',
      },
  
      inputInput: {
          transition: theme.transitions.create('width'),
          width: 'auto',
          [theme.breakpoints.up('sm')]: {
              width: '25%', //change it to 250(number)
              '&amp;:focus': {
                  width: '100%', //change it to 1000(number), it will work fine, but I need percentages. 
              },
          },
      },
  
      loginButtonContainer: {
           flex: 1,
      },
  
      loginButton: {
          justifyContent: 'right',
          marginTop: theme.spacing.unit * 0.5,
          color: theme.palette.secondary.main,
      },
  });
  
  function ExpandingSearchBar(props) {
  
      const { classes} = props;
  
      return (
          &lt;div className={classes.headerPads}&gt;
              &lt;Paper square className={ classes.root }&gt;
                      &lt;div className={classes.logo}&gt;
                          &lt;Typography variant="h5" className={classes.logoFont}&gt;
                              PlaceHolder
                          &lt;/Typography&gt;
                      &lt;/div&gt;
  //Problematic div: the search bar
                      &lt;div style={{border: '1px solid white'}} className={ classes.containerHorizontalAlignment }&gt;
                          &lt;div className={classes.searchBar}&gt;
                              &lt;div className={classes.searchIcon}&gt;
                                  &lt;SearchIcon /&gt;
                              &lt;/div&gt;
                              &lt;InputBase 
                                  placeholder='Search'
                                  classes={{
                                      root: classes.inputRoot,
                                      input: classes.inputInput,
                                  }}
                              /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className={classes.loginButton}&gt;
                          &lt;IconButton className={classes.loginButton}&gt;
                              &lt;AccountCircle fontSize='large'/&gt;
                          &lt;/IconButton&gt;
                      &lt;/div&gt;
              &lt;/Paper&gt;
          &lt;/div&gt;
      );
  }
  
  ExpandingSearchBar.propTypes = {
      classes: PropTypes.object.isRequired,
  }
  
  export default withStyles(styles)(ExpandingSearchBar);
  </code></pre>
  
  <p><strong>Problems:</strong>  </p>
  
  <ol>
  <li><p>in <code>styles.inputInput</code> I have create a transition using material-ui's <code>theme.transition.create</code>, the problem is, if the widths are fixed numbers it works fine, if I pass the percentages to it the component just has a fixed width no expansion or transitions at all.</p></li>
  <li><p>One more problem is if the width searchBar it more than it's parent can accommodate it will no push the 'PlaceHolder' out of <code>Paper</code> but will push the button at the end out of the <code>Paper</code> element and itself will push the itself past the right boundary.</p></li>
  </ol>
  
  <p>I have used <code>theme.create.transitions()</code> from material-ui but please suggest any solutions using only CSS as well.</p>
  
  <p>Try it <a href="https://codesandbox.io/s/0x1wj1zovp?fontsize=14" rel="nofollow noreferrer">here</a> in the sandbox, and switch the browser window of sandbox to full screen.</p>
  
  <p>Thanks</p>