Отображение SVG в OpenGL без промежуточного растра

В качестве учебного упражнения я решил обновить ответ с помощью CSS3 Flexbox. Я также попытался более точно соответствовать макету, который пытался создать jstorm31.

Ответ Ритабраты правильный: если вы хотите, чтобы у определенного элемента были полосы прокрутки, вам нужно установить его высоту (и / или ширину) на фиксированный размер и переполнить на автоматический.

Код также можно найти здесь: Plunker

style.css

#header{
    overflow: hidden; 
    background-color: #880016; 
    height: 50px;
    border-bottom: 4px solid black;
    padding: 10px;
    font-size: 20px;
}
#side_and_content {
    display: flex;
}
#left_side{
    flex: 1;
    overflow:hidden; 
    background-color: #ED1B24;  
    height: 200px;
    border-right: 2px solid black;
    padding: 10px;
}
#content{
    flex: 5;
    overflow: auto;
    background-color: #FF7F26;   
    height: 200px;
    border-left: 2px solid black;
    padding: 10px;
}

index.html

    header header header header header header


    
  
        left side left side left side left side left side
    

    

CSS3 Flexbox Concepts: 
Flexbox consists of flex containers and flex items.
A flex container is declared by setting the display property of an element to either flex
 (rendered as a block) or inline-flex (rendered as inline).
Inside a flex container there is one or more flex items.
Note: Everything outside a flex container and inside a flex item is rendered as usual.
Flexbox defines how flex items are laid out inside a flex container.
Flex items are positioned inside a flex container along a flex line.
 By default there is only one flex line per flex container.

 It is also possible to change the direction of the flex line.
If we set the direction property to rtl (right-to-left), the text is drawn right to left, and also the flex line changes direction, which will change the page layout