use flex-basis, add word-break

Author: wxiaoguang

templates/devtest/flex-list.tmpl

@@ -41,16 +41,13 @@
 				</div>
 				<div class="flex-item-main">
 					<div class="flex-item-title">
-						Flex Item
-						<span class="ui basic label">
-							with label
-						</span>
+						Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong title
 					</div>
 					<div class="flex-item-body">
 						consists of leading/main/trailing part
 					</div>
 					<div class="flex-item-body">
-						main part contains title and (multiple) body lines
+						Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content
 					</div>
 				</div>
 				<div class="flex-item-trailing">

web_src/css/shared/flex-list.css

@@ -29,6 +29,7 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
+  flex-basis: 60%;
 }
 
 .flex-item-header {
@@ -53,7 +54,6 @@
   flex-grow: 0;
   flex-wrap: wrap;
   justify-content: end;
-  min-width: calc(min(40%, 200px));
 }
 
 .flex-item .flex-item-title {
@@ -64,8 +64,8 @@
   max-width: 100%;
   color: var(--color-text);
   font-size: 16px;
-  min-width: 0;
   font-weight: var(--font-weight-semibold);
+  word-break: break-word;
 }
 
 .flex-item .flex-item-title a {
@@ -80,6 +80,7 @@
   flex-wrap: wrap;
   gap: .25rem;
   color: var(--color-text-light-2);
+  word-break: break-word;
 }
 
 .flex-item .flex-item-body a {