0

I am trying to make two block of texts side by side. I am using display:flex with flex-direction: flex-start, however, sometimes there is a large gap between two blocks when I change the page size.

Case 1: when the page width is small, there is no space:

Case 2: while enlarging the page width, the second block move to right and there comes a gap between two blocks

Case 3: when the page is large enough for fitting the long word, the gap close again

Here is the code:

<!DOCTYPE html>
<html>
<head>
<style>

.a {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   flex-flow: row;
   align-content: flex-start;
}

.b {
   border: 1px solid;
}

</style>
</head>
<body>


<div class="a">
  <div class="b">This is some text. This is some texts a very loooooooooooooong text</div>
  <div class="b">This is some text. This is some text. This is some text.</div>
</div>

</body>
</html>
Zhixing CAO
  • 11
  • 1

0 Answers0