Оберните текст в flexbox, но сохраните относительную ширину столбца для разных длин текста

Question

Я использую flexbox для сайта Wordpress. Две колонки, ребенок 1 должен быть 75% страницы, ребенок 2 25%. С небольшим предложением в дочернем 1 он работает, однако, с большим текстом он подталкивает дочернюю ширину страницы от 1 до 100%. Длинный текст не может нажимать div до 100%, но обернуть внутри div. См. Пример jsfiddle ниже. Как я могу это исправить? Это совершенно новое. Tnx!

http://jsfiddle.net/luchtrat/jnys3u5p

body *{border: 1px solid red;} /* just to preview what's happening */ 
 

 
#parent { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-flow: row wrap; 
 
    flex-flow: row wrap; 
 
    padding: 10px; 
 
} 
 
#child_1 { 
 
    flex-grow: 2; 
 
} 
 
#child_2 { 
 
    flex-grow: 1; 
 
}

<div id="parent"> 
 
    <div id="child_1"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam dapibus volutpat. Proin suscipit massa at ipsum semper, et pretium ante bibendum. Vivamus justo erat, aliquet maximus turpis quis, sagittis tempor lectus. Nullam eleifend, nisi 
 
    vitae condimentum elementum, arcu sapien finibus nisl, sit amet euismod nibh felis quis turpis. Fusce nec egestas sapien, non ultricies ligula. Aliquam ac libero elementum, rhoncus massa quis, posuere massa. 
 
    </div> 
 
    <div id="child_2">Fusce nec egestas sapien.</div> 
 
</div> 
 
<div id="parent"> 
 
    <div id="child_1">Lorem ipsum dolor sit amet.</div> 
 
    <div id="child_2">Fusce nec egestas sapien.</div> 
 
</div>

Answer 1

• Не дублировать ID. Идентификатор должен быть уникальным для каждой страницы. Используйте классы вместо:
• Используйте просто: flex:2; и flex:1 соответственно для child_ элементов
  или лучше flex:3, если вы хотите получить 75% → 25% по желанию

body * {border: 1px solid red;} 
 

 
.parent { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    padding: 10px; 
 
} 
 
.child_1 { 
 
    flex: 3; /* "75%" */ 
 
} 
 
.child_2 { 
 
    flex: 1; /* "25%" */ 
 
}

<div class="parent"> 
 
    <div class="child_1"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam dapibus volutpat. Proin suscipit massa at ipsum semper, et pretium ante bibendum. Vivamus justo erat, aliquet maximus turpis quis, sagittis tempor lectus. Nullam eleifend, nisi 
 
    vitae condimentum elementum, arcu sapien finibus nisl, sit amet euismod nibh felis quis turpis. Fusce nec egestas sapien, non ultricies ligula. Aliquam ac libero elementum, rhoncus massa quis, posuere massa. 
 
    </div> 
 
    <div class="child_2">Fusce nec egestas sapien.</div> 
 
</div> 
 
<div class="parent"> 
 
    <div class="child_1">Lorem ipsum dolor sit amet.</div> 
 
    <div class="child_2">Fusce nec egestas sapien.</div> 
 
</div>