'How can I prevent overlapping in nested flex div

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 class="outer">
  <div class="inner">
    <div class="item">
      <span>aaa</span>
      <span>bbb</span>
    </div>
    <div class="item">
      <span>aaa</span>
      <span>bbb</span>
    </div>
    <div class="item">
      <span>aaa</span>
      <span>bbb</span>
    </div>
  </div>
  <div class="inner">
    <div class="item">
      <span>ooo</span>
      <span>ooo</span>
    </div>
  </div>
</div>

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

css


Solution 1:[1]

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

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

Solution 2:[2]

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 class="outer">
    <div class="inner">
        <div class="item">
            <span>aaa</span>
            <span>bbb</span>
        </div>
        <div class="item">
            <span>aaa</span>
            <span>bbb</span>
        </div>
        <div class="item">
            <span>aaa</span>
            <span>bbb</span>
        </div>
    </div>
    <div class="inner">
        <div class="item">
            <span>ooo</span>
            <span>ooo</span>
        </div>
    </div>
</div>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Bar
Solution 2 Elikill58

Related Questions