Word Wrap Not Working

Questions
1

This text does not seem to want to wrap with everything I have tried.

<Button className='no-ripple display-flex flex-direction-column align-items-flex-start' style={{ width: "25vw", flexShrink: "0", height: "auto" }}>
  <Card style={{
      width: "100%",
      height: "12vh",
      backgroundColor: "white",
      borderRadius: "2vw",
      backgroundImage: 'url(' + this.context.menu[item.item_index].item_image + ')',
      backgroundPosition: "left center",
      backgroundSize: "cover",
      backgroundRepeat: "no-repeat",
  }} className='no-margin margin-top'>
  </Card>
  <div style={{ width: "100%" }} className='display-flex justify-content-space-between'>
      <div style={{ maxWidth: "80%", overflowX: "auto" }} className='display-flex flex-direction-column align-items-flex-start text-align-left padding-top-half'>
          <p className='no-margin menu_item_font' style={{ wordBreak: "keep-all", textAlign: "justify" }} >{this.context.menu[item.item_index].item_name}</p>
          <p className='no-margin menu_item_font'>${(this.context.menu[item.item_index].item_price / 100).toFixed(2)}</p>
      </div>
      <div className='padding-top-half'>
          {
              is_in_cart
                  ?
                  <div className='display-flex justify-content-center align-items-center' style={{ width: "45px", height: "45px", borderRadius: "100%", backgroundColor: "black", color: "white" }}>
                      <Icon f7='minus'></Icon>
                  </div>
                  :
                  <div className='display-flex justify-content-center align-items-center' style={{ width: "45px", height: "45px", borderRadius: "100%", backgroundColor: "black", color: "white" }}>
                      <Icon f7='plus'></Icon>
                  </div>
          }
      </div>
  </div>
</Button>

This is the line that does not seem to want to go to the next line.

<p className='no-margin menu_item_font' style={{ wordBreak: "keep-all", textAlign: "justify" }} >{this.context.menu[item.item_index].item_name}</p>