0

So I have a couple of flexboxes inside a flexbox. The Outer flexbox is direction: row, to show two columns. Inside is two divs containing two UL's which are Flexbox flex-direction: Column. To show items in columns and rows inside.

Where I'm struggling is the outer flexbox container isn't resizing to match the columns created inside.

Example here: https://jsfiddle.net/OFark/aqn61sLg/

#container {
    display: flex;
    position: absolute;
    min-width: 50vw;
    left: 10vw;
    top: 0;        
    > div {
        flex: 1 1 auto;
        ul {
            padding: 0;
            max-height: 50vh;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            list-style: none;
        }
    }
}

The left-hand column is writing over the right. I've not stopped the left-hand column from growing. Any ideas?

Tod
  • 2,070
  • 21
  • 27
  • Try removing all of the positioning stuff...it's unnecessary. – Paulie_D Aug 01 '19 at 12:35
  • The thing is, your
      need to have overflow atribute, so the content will generate a srcoll if the content is bigger then the space (which is the case). After include the overflow, see the result with and without and decide what you want
     – Julliano Osorio Aug 01 '19 at 13:08
  • This is a small snippet into some large design. The position is important. The overflow is fine if the content was reaching the edge of the screen, but it has room to expand and isn't. – Tod Aug 02 '19 at 10:25

0 Answers0