stop expand due to text

by Nadeesh Peiris

HTML

<div class="outer">
  <div class="header">
    <div class="header-text">text text text text text text text text text text text text text text
    </div>
    
  </div>
  <div class="content">
    <div class="inner-content">
    
    </div>
  </div>
</div>

CSS

.outer {
  position: absolute;
  height: 200px;
  background-color: #CCC;
  min-width: 5px;
  display: flex;
  flex-direction: column;
}  

.header {
  background-color: #999;
    display: flex;
}

.header-text {
  width: 0px;
  flex-grow: 1;
}

.content {
  width: 300px;
  background-color: #AAA;
  overflow: auto;
}

.inner-content {
  height: 500px;
  background-color: #777;
  margin: 5px;
}