Make flexbox grow vertical-CodePudding

So I am new to flexbox and I have been playing around with it for some time. I have a requirement that the middle layout needs to grow vertically. Here's what I have:

.main-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    background: #F7F8FC;
}

.sub-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    white-space: nowrap;
}

<div class="main-container">
  <div class="flex-row-item left">
    <button>
      <span>Email</span>
    </button>
  </div>
  <div class="flex-row-item center">
    <div class="sub-container">
      <button>
        <span>Previous</span>
      </button>
      <div class="sub-text">
        <span>Item Name: THIS IS SOME TEXT THAT IS really really really long</span>
      </div>
      <button>
        <span>Next</span>
      </button>
    </div>
  </div>
  <div class="flex-row-item right">
    <button>
      <span>Help</span>
    </button>
  </div>
</div>

So when the text in "sub-text" starts to get longer and longer, current styling makes the flexbox breaks into a new line along with the "Previous", "Next" and "Help" buttons. I do not want that to happen. Instead how can I just grow the "sub-text" vertically with word wrap while expanding the main container height? For example see this : Example

CodePudding user response：

use white-space: pre-line

.sub-text{
    white-space: pre-line;
}

and there is no need for flex-wrap: wrap;

working example:

.main-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    background: #F7F8FC;
}

.sub-container {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.sub-text{
    white-space: pre-line;
}

<div class="main-container">
  <div class="flex-row-item left">
    <button>
      <span>Email</span>
    </button>
  </div>
  <div class="flex-row-item center">
    <div class="sub-container">
      <button>
        <span>Previous</span>
      </button>
      <div class="sub-text">
        <span>Item Name: THIS IS SOME TEXT THAT IS really really realddddly londdddddddddddddddddddddddddg</span>
      </div>
      <button>
        <span>Next</span>
      </button>
    </div>
  </div>
  <div class="flex-row-item right">
    <button>
      <span>Help</span>
    </button>
  </div>
</div>

Learn more

CodePudding user response：

Have you tried using CSS grids. I think this solution is cleaner than flex.

.main-container {
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: #F7F8FC;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

button {
  margin: auto;
}

<div class="main-container">
  <button>
      <span>Email</span>
    </button>
  <button>
        <span>Previous</span>
      </button>
  <span>Item Name: THIS IS SOME TEXT THAT IS really really really long</span>
  <button>
        <span>Next</span>
  </button>
  <button>
      <span>Help</span>
    </button>
</div>