flexbox下的孩子没有指定宽度[重复]
Posted
技术标签:
【中文标题】flexbox下的孩子没有指定宽度[重复]【英文标题】：Child under flexbox is not taking width specified [duplicate] 【发布时间】：2021-10-16 11:36:11 【问题描述】：我刚开始学习 CSS，我正在使用 flexbox 处理一个页面。问题是，
我有一个容器 display: flex。
我有一个左侧图像
我有一个右侧的长文本。
正如您在下面的 sn-p 中看到的，.content 没有占用 50% 的宽度。
任何帮助将不胜感激。
提前致谢
.container
display: flex;
img
max-width: 100%;
.content
width: 50%;
<div class='container'>
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg" />
<div class='content'>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?</p>
</div>
</div>【问题讨论】：
您需要为孩子指定flex 属性
【参考方案1】：
您需要指定flex 属性，如下所示。
.container
display: flex;
img, .content
/* max-width: 100%; */
flex: 1;
width: 50%;
<div class='container'>
<img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg" />
<div class='content'>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ex asperiores recusandae maxime possimus obcaecati sint atque quas, inventore quo ipsam quam tenetur voluptate excepturi adipisci nihil omnis consequuntur nemo ea?</p>
</div>
</div>【讨论】：
以上是关于flexbox下的孩子没有指定宽度[重复]的主要内容，如果未能解决你的问题，请参考以下文章
flex box的孩子不对齐底部（flex end）[重复]