andrew_basta

В общем искал объяснение в инете, и ничего попутного не нашел. Проблема собственна решена, но не понятна причина. Есть у меня кнопка, которая спозиционирована внутри родительского контейнера абсолютно. Только вот когда, макет у меня ужимается до мобильных разрешений, текст кнопки переносится на след. строку, хотя места вокруг достаточно, для расположения текста в одну линию(на прикрепленном к посту скрине, показано это странное поведение). Проблема, из-за чего возникает такое поведение возникает из-за этих двух строчек: left: 50%; transform: translateX(-50%); если их убрать, то текст кнопки в одну располагается в одну линию. Вот полный пример . Данная проблема решается, если задать кнопке white-space: nowrap. Собственно вопрос почему все таки при центрировании через absolute: position текст у нас переносится на новую строку, хотя места у нас вполне хватает. Ширину кнопке явно я не задаю, т.к. текст может быть произвольной длины.