0

Here is my current code:

<div style="display: flex">
  <div>
    <p class="text-center font-weight-bold">Interests</p>
    <div style="display: flex; flex-wrap: wrap; flex-direction: column; height: 240px">
      <div>some</div>
      <div>data here</div>
      <div>test message</div>
      <div>some</div>
      <div>data here</div>
      <div>test message</div>
      <div>some</div>
      <div>data here</div>
      <div>test message</div>
      <div>some</div>
      <div>data here</div>
      <div>test message</div>
    </div>
  </div>
  <div>
    <div>
      <p class="mb-2 text-center font-weight-bold">Price</p>
      <div style="display: flex; justify-content: space-between;">
        <div>right data 1</div>
        <div>right data 2</div>
      </div>
    </div>
    <div>
      <p class="mb-2 text-center font-weight-bold">Duration</p>
      <div style="display: flex; justify-content: space-between;">
        <div>right data 3</div>
        <div>right data 4</div>
      </div>
    </div>
  </div>
</div>

This is the current look: enter image description here

How can I move "Price + Duration" block to the right without specifying width, because "Interests" may have different amount of columns?

j08691
  • 204,283
  • 31
  • 260
  • 272
TitanFighter
  • 4,582
  • 3
  • 45
  • 73
  • Yes. Just did not convert Headers to raw css :) For me the answer with raw css or bootstrap could be ok, I can convert css back to bootstrap. Just can not find out how to fix this issue. – TitanFighter Aug 21 '20 at 22:26
  • Why not use the [traditional Bootstrap way](https://jsfiddle.net/dL07ojcp/6/) to do so ? – Tommy Aug 21 '20 at 23:34
  • @Tommy I was able to get your version, but try to remove the last 2 divs `data here` and `test message` and you will see that there is free space that I do not need. – TitanFighter Aug 21 '20 at 23:49
  • How about [this](https://jsfiddle.net/wj10uzrg/2/) using `col-auto` on the first column ? – Tommy Aug 21 '20 at 23:52
  • Nope. `col-auto` works ok just with one column (10 items), but in my case could be any amount of items, so I need a solution which can make the parent div wider or narrower depending on the amount of columns, without overlapping left and right blocks ([Interests] and [Price + Duration]) – TitanFighter Aug 21 '20 at 23:57
  • The problem is that `display: flex; flex-wrap: wrap; flex-direction: column;` does not change the `div`'s width, which causes the `col-auto` class not to scale properly. Interesting behavior. I could not find a solution yet. – Tommy Aug 22 '20 at 00:21
  • Also have a [look here](https://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width). – Tommy Aug 22 '20 at 00:24
  • 1
    @Tommy thanks for the link that helped me to find solution - https://stackoverflow.com/a/41209546/4992248 . You can create an answer so I can accept it. – TitanFighter Aug 22 '20 at 09:23

1 Answers1

1

Solution based on this answer:

.interests-by-columns {
    display: inline-flex;
    writing-mode: vertical-lr;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 220px;
}

.interest-item {
    writing-mode: horizontal-tb;
    margin-right: 25px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div style="display: flex">
    <div>
        <p class="text-center font-weight-bold">Interests</p>
        <div class="interests-by-columns">
            <div class="interest-item">some</div>
            <div class="interest-item">data here</div>
            <div class="interest-item">test message</div>
            <div class="interest-item">some</div>
            <div class="interest-item">data here</div>
            <div class="interest-item">test message</div>
            <div class="interest-item">some</div>
            <div class="interest-item">data here</div>
            <div class="interest-item">test message</div>
            <div class="interest-item">some</div>
            <div class="interest-item">data here</div>
            <div class="interest-item">test message</div>
            <div class="interest-item">some</div>
        </div>
    </div>

    <div class="ml-5 mr-2" style="width: 180px">
        <div>
            <p class="mb-2 text-center font-weight-bold">Price</p>
            <div style="display: flex; justify-content: space-between;">
            <div>right data 1</div>
            <div>right data 2</div>
            </div>
        </div>

        <div>
            <p class="mb-2 text-center font-weight-bold">Duration</p>
            <div style="display: flex; justify-content: space-between;">
            <div>right data 3</div>
            <div>right data 4</div>
            </div>
        </div>
    </div>
</div>
TitanFighter
  • 4,582
  • 3
  • 45
  • 73
Tommy
  • 2,355
  • 1
  • 19
  • 48