Как сделать все элементы в гибком дочернем контейнере одинаковой ширины

Question

Итак, у меня есть flex-контейнер, который содержит 2 элемента.

<div style={{display: flex}}>
    <BooksList />
    <TextEditor />
</div>

Я бы хотел, чтобы BooksList был столбцом кнопок одинаковой ширины, независимо от содержимого (на данный момент их высота может меняться для размещения контента). Кажется, что работает со следующим (booksListContainer - это контейнер вокруг bookButton s):

.bookListContainer {
    flex-direction: column;
    flex: 0 1 0;
}

.bookButton {
    color: rgb(245, 245, 245) ;
    background-color: #444;
}

Это делает то, что я хочу ... вроде. css TextEditor выглядит следующим образом:

.slateContainer{

    flex-direction: column; 

    width: 50%;
    margin: 0 auto;
}

.textEditor {
    color: rgb(245, 245, 245);
}

slateContainer содержит строку формата и фактический редактор. Установка flex-direction ставит панель форматирования вверху. В общем, у меня есть это. По сути, это то, что я хочу, но я хочу, чтобы кнопки были в х раз больше:

Полуфабрикаты

Как мне установить это соотношение с помощью flex?

Спасибо,

Алекс