Размещайте элементы внутри гибкого контейнера, используя только CSS ⇐ CSS

[Anonymous]

Я работаю над файлом CSS, в котором мне нужно использовать flex для позиционирования элементов.
Элементы должны выглядеть следующим образом:

Код: Выделить всё

======================================|--------|
Header                    |        |
======================================| edge-1 |
|                                |--------|
|                                |        |
Nav  |         Information            | edge-2 |
|                                |--------|
|                                |        |
|                                | edge-3 |
======================================|        |
Footer                        |        |
=======================================--------|

Подробная информация о размере элемента:

Код: Выделить всё

• The left side container (Header, Nav, Information, Footer) needs 4/5 of the parent's width.
• The right side container (edges 1,2,3) needs 1/5 of the parent's width.

• The Nav needs 1/4 of the parent's width.
• The Information needs 3/4 of the parent's width.
• The Header needs 1/5 of the parent's height.
• The Footer needs 1/5 of the parent's height.

У меня есть файл index.html, который доступен только для чтения:

Код: Выделить всё

body {
margin: 0;
font-family: Arial, sans-serif;
}

.holder {
display: flex;
flex-direction: column;
height: 100vh;
}

.elements {
display: flex;
flex: 1;
}

.left-portion {
display: flex;
flex-direction: column;
flex: 4;
}

.right-portion {
display: flex;
flex-direction: column;
flex: 1;
}

.header {
flex: 1;
background-color: #f1f1f1;
}

.footer {
flex: 1;
background-color: #f1f1f1;
}

.content {
display: flex;
flex: 3;
}

.nav {
flex: 1;
background-color: #e1e1e1;
}

.information {
flex: 3;
background-color: #d1d1d1;
}

.item {
border: 1px solid #ccc;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
}

.edge-1,
.edge-2,
.edge-3 {
flex: 1;
background-color: #c1c1c1;
}

Код: Выделить всё

С помощью этого CSS я могу выравнивать элементы, находящиеся под частью div " Holder -> elements"
Теперь мне сказали изменить этот CSS на основе сценария тестового примера:

Код: Выделить всё

  it.each([
'header', 'nav', 'information', 'footer', 'edge-1', 'edge-2', 'edge-3'
])('verify element %s ', async (element) => {
const elements = await driver.findElement(By.css(`.elements [data-title="${element}"]`))
const template = await driver.findElement(By.css(`.template [data-title="${element}"]`))

const eRect = await elements.getRect()
const tRect = await template.getRect()

const deviation = 2
expect(Math.abs(tRect.y - eRect.y)).toBeLessThanOrEqual(deviation)
expect(Math.abs(tRect.x - eRect.x)).toBeLessThanOrEqual(epsilon)

expect(Math.abs(tRect.width - eRect.width)).toBeLessThanOrEqual(deviation)
expect(Math.abs(tRect.height - eRect.height)).toBeLessThanOrEqual(deviation)
})

Здесь тестовому сценарию необходимо, чтобы элементы, находящиеся в «шаблоне» класса Div, находились внутри держателя гибкого контейнера.
Я застрял здесь. как изменить CSS, не затрагивая HTML и тестовые скрипты.

Подробнее здесь: https://stackoverflow.com/questions/787 ... g-only-css