title: How to make a (nodeType == Node.ELEMENT_NODE) acts like (nodeType == Node.TEXT_NODE) in context of flex-direction: column CSS
body: <p>You can see below the <code>div._b5a</code> is a flex container with  <code>flex-direction: column</code>.
  However, normally its child is just a text sentence <em>(<a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType" rel="nofollow noreferrer">nodeType == Node.TEXT_NODE</a>)</em>: <code>新增個人簡介，讓大家更瞭解你</code> so the text sentence is still in the same line horizontally. That's the norm.</p>
  <p>But after installing <a href="https://chrome.google.com/webstore/detail/wanikani-highlighter/hombnkakdkackepmkogeoldikgigfeoh?hl=vi" rel="nofollow noreferrer">this Chrome extension</a> in order to learn Kanji, it helped me by highlighting the Kanji's I want to learn. It highlights the text by wrapping it inside a <code>&lt;mark style=&quot;background: green&quot;&gt;</code>  (like the line 2 &amp; 4 in the HTML snippet below). It works fine, until the case below when its parent is a flex container with <code>flex-direction: column</code>, it breaks the sentence into 3 lines instead of 1.</p>
  <p>How can I fix it? <em>To highlight the text in this case, still keep the sentence in 1 line</em>. You can look at the code of the extension <a href="https://github.com/Rickkwa/wanikani-highlighter/blob/master/js/highlight.js#L84-L94" rel="nofollow noreferrer">here</a>.</p>
  <p>Hint: By adding</p>
  <pre class="lang-css prettyprint-override"><code>flex-direction: row;
  justify-content: center;
  </code></pre>
  <p>to the <code>div</code> owns the sentence, it works adhocly for the case, but I'm not sure how to fix <a href="https://github.com/Rickkwa/wanikani-highlighter/blob/master/js/highlight.js#L84-L94" rel="nofollow noreferrer">the code from the extension</a> to make it work. (I'm bad at Jquery)</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>._b5a {
      align-content: flex-start;
      align-items: stretch;
      -webkit-appearance: none;
      background-color: transparent;
      border: 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      margin: 0;
      min-width: 0;
      padding: 0;
      position: relative;
      /* flex-direction: row;
      justify-content: center; */
  }
  
  div {
      display: block;
  }
  .fbTimelineUnit {
      color: #1c1e21;
      display: block;
      margin-bottom: 10px;
      position: relative;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="_b5a" style="text-align: center; opacity: 0.7;"&gt;新增個人簡介，讓
  &lt;mark class="wkh-hl" style="background-color: green; color: inherit;"&gt;
  大
  &lt;/mark&gt;
  家更瞭解你。&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>