How can I prevent overlapping in nested flex div-CodePudding

I am trying to prevent that nested elements get overlapped. I want to move the second .inner div element to the right, so first element gets more space.

.outer {
  display: flex;
}

.inner {
  display: flex;
  flex-flow: column wrap;
  max-height: 53px;
}

<div >
  <div >
    <div >
      <span>aaa</span>
      <span>bbb</span>
    </div>
    <div >
      <span>aaa</span>
      <span>bbb</span>
    </div>
    <div >
      <span>aaa</span>
      <span>bbb</span>
    </div>
  </div>
  <div >
    <div >
      <span>ooo</span>
      <span>ooo</span>
    </div>
  </div>
</div>

See: https://codepen.io/xnsua/pen/mdpWXBY

CodePudding user response：

You can use flex-grow for the first .inner div:

.inner:first-child {
    flex-grow: 1;
}

CodePudding user response：

I suggest you to use flex-wrap: nowrap; to the .inner class

.inner {
    display: flex;
    flex-flow: column wrap;
    flex-wrap: nowrap;
    max-height: 53px;
}

<body>
<div >
    <div >
        <div >
            <span>aaa</span>
            <span>bbb</span>
        </div>
        <div >
            <span>aaa</span>
            <span>bbb</span>
        </div>
        <div >
            <span>aaa</span>
            <span>bbb</span>
        </div>
    </div>
    <div >
        <div >
            <span>ooo</span>
            <span>ooo</span>
        </div>
    </div>
</div>
</body>