ボタンは内容に依存せず、すべて同じサイズです

Question

ボタン内に異なるコンテンツが配置されている場合、すべてのボタンが同じサイズになってしまいます。私はこれをより良く理解するのに役立つヒントやトリックを探しています。ボタンの周囲に境界線

.but { 
background-color: white; 
color: black; 
border: 2px solid #C8C8C8; 
height: 1.5em; 
text-decoration: none; 
display: inline-block; 
font-size: 1.2em; 
cursor: pointer; 
margin: -2px; 
} 

.symbox { 
width: 20em; 
height: 5.2em; 
overflow-y: auto; 
overflow-x: hidden; 
border: 1px solid black; 
margin: 1px 0px; 
} 

すべてのボタンで.but と.symboxされています。ここでは

iはボタン部分に使用しているCSSコードです：ここ はsituasjonの写真です

.container { 
 
    width: 4em; 
 
    
 
    display:flex; 
 
    flex-wrap:wrap; 
 
} 
 
.but { 
 
    border: 2px solid #ccc; 
 
    padding: 2px; 
 
    text-align: center; 
 
    
 
    flex-grow: 1; 
 
}

<div class="container"> 
 
    <div class="but">a</div> 
 
    <div class="but">b</div> 
 
    <div class="but">c</div> 
 
    <div class="but">de</div> 
 
    <div class="but">f</div> 
 
    <div class="but">ghi</div> 
 
    <div class="but">j</div> 
 
    <div class="but">k</div> 
 
    <div class="but">l</div> 
 
    <div class="but">m</div> 
 
</div>

：

Answer 1

あなたはflexbox、このようなものを使用することができます3210

はここで効果的flexboxを使用する方法の本当に素晴らしいガイドです：https://css-tricks.com/snippets/css/a-guide-to-flexbox/