CODEWITHSUNDEEP
cssflexbox
fox
fox

Reputation: 181

Inline div with flex

Let's say I have 2 div that should be inline and I want to make the second div grow below the first div if the content is more than parent div. now when I add flex and make them inline, it looks like this : JSFiddle

Something like this:

enter image description here

Any advice?

Upvotes: 0

Views: 119

Answers (1)

Paulie_D
Paulie_D

Reputation: 114991

This is not possible with flexbox.

However, if you make the required elements display:inline it is.

.field,
.field-items,
.field-item {
  display: inline;
}

h2 {
  margin-top: 0;
  display: inline;
}
<div class="group-title-wrapper">
  <div class="field field-name-post-date field-type-ds field-label-hidden">
    <div class="field-items">
      <div class="field-item even">08 January</div>
    </div>
  </div>

  <div class="field field-name-title field-type-ds field-label-hidden">
    <div class="field-items">
      <div class="field-item even" property="dc:title">
        <h2>Vokalia and Consonantia, there live the blind texts.Lorem ipsum dolor amet schlitz ennui taxidermy bespoke vinyl lyft iceland selfies quinoa intelligentsia. Tacos semiotics yuccie fam photo booth hella health goth kitsch whatever waistcoat.</h2>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions