.screen { position: absolute; top: 0px; bottom: 0px; } .column { display: flex; flex-direction: column; // background: yellow; margin: 10px; } .row { display: flex; flex-direction: row; } .stretch { flex-basis: 0; // flex-grow: 1; // flex-shrink: 1; } .fixed { flex-grow: 1; flex-shrink: 1; } .scroll-y { overflow-y: auto; } .scroll-x { overflow-x: auto; } .button { border: 2px; margin: 3px; max-width: 50px; overflow-x: hidden; } img { max-width: 600px; display: block; // overflow-x: auto; } pre { max-width: 650px; // overflow-x: auto; // overflox-y: none; } .content { width: 800px; } .content > div { overflow-x: show; margin-left: auto; margin-right: auto; } .content > div > * { max-width: 600px; } .tabs > .row { flex-grow: 0; flex-shrink: 0; margin: 10px; } .tabs > .row > * { max-width: 50px; overflow-x: hidden; margin-right: 5px; } .selected { background: yellow; } .tabs > .row > .selected { max-width: 200px; } .message { border: 1px solid black; padding: 5px; background: white; display: block; flex-basis: 0; } .message > .title > .message_meta { margin-right: 5px; } .message > .title > .avatar { margin-right: 5px; } .suggest-box > * { background: white; margin: 3px; } .suggest-box{ // display: flex; // flex-direction: row; width: 200px; } .suggest-box img { width: 50px; } .suggest-box,.selected img { width: 200px; }