Как не переносить flex-блоки на новую строку?

Question

[Вячеслав Рыжков]

Суть такова, есть flex-блок, и есть ещё один в группе с ним и они должны находиться на одной строке. Но почему то следующий блок автоматически переноситься. Как сделать так, чтобы они находились на одной строке. К сожалению вариант с display: inline(-block); не получиться, тк его уже занял flex. Также не подойдёт вариант с white space: nowrap;, тк в самих блоках есть текст, автоматически переносящиеся на другую строку

Answer 1

[Никита Кит]

есть flex-блок, и есть ещё один в группе с ним

Проверь, нет ли где flex-wrap: wrap у их родителя. У него должен быть только display flex (с префиксами само собой)

Comments

[Вячеслав Рыжков]

Проверил, поправил, но теперь такая хрень, что после каждого слова идёт перенос

[Никита Кит]

rugrisser, блин я не экстрасенс. Код давай

[Trash]

rugrisser, Скиньте на jsfiddle код, и выложите здесь ссылку

[Вячеслав Рыжков]

Никита Кит,

div.subblock {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin-top: 2%;
    margin-bottom: 2%;
}

div.downloadBlock {
    display: flex;
    flex-wrap: nowrap;
    width: 40%;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 10px;
    padding: 3%;
    transition: background-color 0.3s ease-out;
}
div.downloadBlock:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

div.spaceBlock {
    width: 30%;
}

img.icon {
    white-space: nowrap;
}

<div class="subblock">
                <a class="block" href="https://8site.ru/download?id=2">
                    <div class="downloadBlock">
                        <img src="icons/epub.png" height="12%">
                        <div style="margin-left: 3%">&nbsp;</div>
                        <div class="spaceBlock">
                            <span class="blockTitle">EPUB</span>
                            <p class="blockDesc">Формат для приложений типа iBooks</p>
                        </div>
                    </div>
                </a>
                <a class="block" href="https://site.ru/download?id=2">
                    <div class="downloadBlock">
                        <img src="icons/epub.png" height="12%">
                        <div style="margin-left: 3%">&nbsp;</div>
                        <div class="spaceBlock">
                            <span class="blockTitle">IOS.EPUB</span>
                            <p class="blockDesc">Формат EPUB, адаптированный для iPhone и iPad</p>
                        </div>
                    </div>
                </a>
            </div>

[Никита Кит]

rugrisser, ну теперь понятно. Естественно строки будут переноситься, ширина блока не позволяет им уйти далеко по ширине. Как ты встроишь в одну линию столько контента?
jsfiddle.net/ha4czn5w