Как достичь автоматического увеличения ширины блока до 100%, когда текст переносится на новую строку?

1. Чтобы автоматически увеличить ширину блока до 100% при переносе текста на новую строку, вы можете использовать свойство `white-space: nowrap;` и `display: inline-block;` для блока.

   Пример CSS:

   ```css
   .block {
     display: inline-block;
     white-space: nowrap;
     width: auto;
   }
   ```

   Теперь блок будет автоматически увеличиваться по ширине до 100%, когда текст переносится на новую строку.

2. Чтобы два блока располагались в одной строке, но переносились на следующую, если каждый блок меньше 300px в ширину, вы можете использовать свойство `flex` и медиазапросы.

   Пример CSS:

   ```css
   .container {
     display: flex;
     flex-wrap: wrap;
   }
   
   .block {
     flex: 1 1 300px;
     max-width: 100%;
   }

   @media (max-width: 600px) {
     .container {
       flex-direction: column;
     }
   
     .block {
       flex-basis: 100%;
     }
   }
   ```

   В данном примере блокам задано свойство `flex: 1 1 300px;`, чтобы они занимали одинаковую ширину и переносились, если ширина каждого блока меньше 300px. При помощи медиазапроса `@media (max-width: 600px)` мы меняем флекс-направление на колонку и устанавливаем ширину 100% для блоков, чтобы они переносились на новую строку и занимали всю доступную ширину.

Используйте дополнительные свойства flexbox - flex-basis и flex-grow - для достижения требуемого результата. 

 

При работе со свойствами flexbox, не забывайте использовать flex-basis и flex-grow для получения нужного эффекта.