Как добавить поле без добавления дополнительного места в родительский div

Question

Я создаю ящик боковой панели, используя пользовательский интерфейс реагирования, и пытаюсь создать выбранный элемент в стиле ящика боковой панели, как в этом примере http://react -material-dashboard.devias.io / dashboard .

Я использую код отсюда https://github.com/mui-org/material-ui/blob/master/docs/src/pages/demos/drawers/ResponsiveDrawer.js, чтобы создать ящик.

И добавьте подобный стиль для активного элемента.

const styles = () => ({
  clickedItem: {
    borderLeft: "4px solid #0767DB",
    borderRadius: "4px",
    backgroundColor: "#F6F9FD",
    marginLeft: "10px"
  }
});

Однако из-за того, что я добавил marginLeft, боковая панель теперь прокручивается по оси x, потому что она добавляет дополнительное пространство справа. Я хочу, чтобы он добавил поля слева, не затрагивая правую сторону. Я пытаюсь использовать overflow: "hidden". Но полоса прокрутки y также скрыта и не может быть прокручиваться.

Как это исправить, чтобы размер (ширина) элемента не изменился, хотя я добавил marginLeft?

Answer 1

У меня была игра с браузером-инспектированием на панели инструментов.

Попробуйте добавить: width:auto; к стилям, которые вы передаете активному элементу.Это остановит добавление поля к фиксированной ширине без разбора и приведет к переполнению.

Так же, как бонус, это может помочь добавить word-break: break-all;, чтобы избежать любых длинных слов, которые также вызывают переполнение в блоке.

Надеюсь, это поможет!