1

I have 3 DIV components where:

  • .child-left: aligns its contents to the left on the screen
  • .child-center: aligns its contents to the center on the screen
  • .child-right: aligns its contents to the right on the screen

However, when the contents (or text) get really long in .child-center, the contents overflow each other even though it has its own width. Please see the below screenshot:

example

I'd like to know:

  1. Why the content (Long text...) in .child-center does not fit within the width?
  2. How do I fix the issue with the minimal changes? (I'd like to keep using display: flex, I DO NOT want to use text-align: center)

What I want to achieve is this:

the goal

Please help me out!

Code:

.parent {
  display: flex;
  align-items: center;
  width: 100%;
}

.child-left {
  display: flex;
  justify-content: flex-start;
  width: 20%;
  background-color: green;
  white-space: nowrap;
}

.child-center {
  display: flex;
  justify-content: center;
  width: 60%;
  background-color: red;
  white-space: nowrap;
}

.child-right {
  display: flex;
  justify-content: flex-end;
  width: 20%;
  background-color: yellow;
  white-space: nowrap;
}
<div class="parent">
  <div class="child-left">
    <span>11111111111111111111111111</span>
  </div>
  <div class="child-center">
    <span>Long text Long text Long text Long text Long text Long text Long text Long text Long text</span>
  </div>
  <div class="child-right">
    <span>22222222222222222222222222</span>
  </div>
</div>
KimchiMan
  • 4,836
  • 6
  • 35
  • 41
  • remove the width on your flex children – dale landry Jul 11 '21 at 00:54
  • @dalelandry Thanks for the reply! That doesn't solve the issue because removing the `width` increases the `.parent` width (now the horizon scrollbar is visible). I want to keep the child DIVs' width in a certain value, which is percentage for now – KimchiMan Jul 11 '21 at 01:03
  • THen add a flex wrap on the child elements or remove the nowrap on white space as you are forcing a width for content that has no other option but to overflow. You could also add an overflow hidden which would hide the content. – dale landry Jul 11 '21 at 01:04
  • remove justify-content:center and use margin:auto on child – Temani Afif Jul 11 '21 at 01:14
  • @dalelandry I see, so basically it's impossible to achieve what I want with the option `white-space: nowrap`. Thanks! – KimchiMan Jul 11 '21 at 01:26
  • @KimchiMan But **what exactly** do you want to achieve? Try to define expected behaviour on paper - what browser should do with your blocks when there is not enough space? How do you expect to both keep content in 3 blocks without wrapping and at the same time fit the container? – Vladislav Akhmetvaliyev Jul 11 '21 at 01:31
  • @VladislavAkhmetvaliyev Thanks for the reply! I've updated the question (attached the screenshot: https://i.stack.imgur.com/mz0vz.png). Please check it out! – KimchiMan Jul 11 '21 at 01:46
  • @KimchiMan `span { max-width: 100%; overflow: hidden; }` should work – Vladislav Akhmetvaliyev Jul 11 '21 at 01:56
  • @VladislavAkhmetvaliyev Thanks for the help! Can you add your solution as an answer, please? – KimchiMan Jul 11 '21 at 01:59
  • @KimchiMan I can not as someone marked your question as duplicate. I can not even flag it to the moderator. Weird... – Vladislav Akhmetvaliyev Jul 11 '21 at 02:17
  • 3
    @VladislavAkhmetvaliyev I see, but your solution `max-width: 100%` solved my problem. Thanks thanks thanks!!! – KimchiMan Jul 11 '21 at 02:18

0 Answers0