NavBar POC

by Chamster

HTML

<div class="header">

  <div class="left">
    <div class="holder">
      <div class="linky">Expando Duoeli Extrum</div>
      <div class="linky">Expando Junkus</div>
      <div class="linky">Short</div>
    </div>
  </div>

  <div class="right">
    <div class="holder">
      aaa bbbb ccccccc ddd eeeeeeee
    </div>
  </div>

</div>

CSS

div.left>div.holder,
div.right>div.holder {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  border: 4px solid greenyellow;
  padding: 2px;
}

div.linky {
  display: flex;
  flex: 0 1 auto;
  overflow: hidden;
  white-space: nowrap;

  border: 4px solid orange;
  padding: 2px;
}






div.header {
  display: flex;
  width: 90%;
  margin: 15px 5%;
  height: 120px;
  font-size: 28px;
  justify-content: space-between;
  align-items: stretch;
  overflow: hidden;
  white-space: nowrap;
  border: 2px dashed grey;
  padding: 2px;
}

div.header>div.left {
  display: flex;
  flex: 5 5 0;
  overflow: hidden;
  border: 4px solid crimson;
  padding: 2px;
}

div.header>div.right {
  display: flex;
  flex: 2 2 0;
  overflow: hidden;
  justify-content: flex-end;
  border: 4px solid royalblue;
  padding: 2px;
}