ブレークタグ付きフレックスを表示

Question

リッチテキストボックスを開発しています。まだ編集可能なDOMとして開発されていません。初期段階にはまった。私はそれをFlex要素と言いました。 cmd+enterには<br>タグが追加されます。私はFlex要素の直接の子として<a>タグを持っています。 <a>タグを追加すると、その要素は配置から離れるようになります。 <a>要素を整列させる方法（整列させる必要があります）私が余分にdivを追加すれば、それは修正されます。アライメントが騒がしいなりextraDivクラスとDOMを取り除くことに

.my-inline-element { 
 
    border: 2px solid red; 
 
    display: flex; 
 
    height:100px; 
 
}

<div class="my-inline-element"> 
 
    <div class="extraDiv"> 
 
     item 
 
     <br> 
 
     <a href="3">Item2</a> 
 
     <br> 
 
     sample3 
 
     <br> 
 
     sample4 
 
     <br> 
 
    </div> 
 
</div>

の下に参照してください。 extraDivを追加せずに達成するためのいずれかの可能性があるです

.my-inline-element { 
 
    border: 2px solid red; 
 
    display: flex; 
 
    height:100px; 
 
}

<div class="my-inline-element"> 
 
     item 
 
     <br> 
 
     <a href="3">Item2</a> 
 
     <br> 
 
     sample3 
 
     <br> 
 
     sample4 
 
     <br> 
 
</div>

の下に参照してください。 COLUMN`：また、私は

Answer 1

.my-inline-element { 
    border: 2px solid red; 
    display: flex; 
    height:100px; 
    flex-direction: column nowrap; 
} 

クリックhere

Answer 2

By adding another CSS class to your parent DIV or mentioned the child element as display:block will help to sort out your issue, Lets 

が...

https://jsfiddle.net/jk2sy1f0/ 

> .my-inline-element { border: 2px solid red; display: flex; 
> height:100px; } 
> 
> .lineBreak{ 
>  display:block; } 
> 
> <div class="my-inline-element lineBreak"> item <br> <a 
> href="3">Item2</a> <br>sample3 <br>sample4 <br> </div> 
>